diff --git a/pages/index.js b/pages/index.js
index c52c7ee..56b06a5 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -38,7 +38,7 @@ export default function Home() {
 
         <p>
           tired of the rat race on{' '}
-          <font color="grey">insta, tiktok, snap, &quot;meta&quot;...</font>?
+          <font className='text-gray-300'>insta, tiktok, snap, &quot;meta&quot;...</font>?
         </p>
 
         <p>
@@ -55,7 +55,7 @@ export default function Home() {
         </p>
 
         <p>
-          wanna test the beta? text us @ <font color="grey">949.237.2715</font>
+          wanna test the beta? text us @ <font className='text-gray-300'>949.237.2715</font>
         </p>
 
         {/* <marquee
diff --git a/pages/teams/demo.tsx b/pages/teams/demo.tsx
index e075840..a9f6bc6 100644
--- a/pages/teams/demo.tsx
+++ b/pages/teams/demo.tsx
@@ -141,7 +141,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
     render() {
         return (
             <>
-                <div className="container mx-auto max-w-screen-xl pt-10 flex flex-col space-y-5 ">
+                <div className="container mx-auto max-w-screen-xl pt-10 flex flex-col space-y-5">
                     <Head>
                         <link
                         href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
@@ -316,6 +316,11 @@ export default class Demo extends React.Component<MyProps, MyState> {
                 </div>
                 
                 <div className='fixed bottom-10 w-full'>
+                    {/* logo */}
+                    <div className='left-0 -bottom-5 absolute pl-5'>
+                        <p id="main-title">nirvana</p>
+                    </div>
+                            
                     {/* dynamic footer based on selection */}
                     <section className={"flex flex-row bg-gray-300 max-w-screen-md mx-auto p-5 shadow-xl rounded-xl justify-between ease-in-out duration-300 scale-0" + (this.state.selectedChannel != null ? "scale-100" : " ")}>
                         <span className='flex flex-row'>
diff --git a/pages/teams/index.js b/pages/teams/index.js
index 29fc2e6..4db3c4f 100644
--- a/pages/teams/index.js
+++ b/pages/teams/index.js
@@ -36,7 +36,7 @@ export default function Home() {
 
         <p>
           tired of spending most of the work day on{' '}
-          <font color="grey" className="text-3xl">slack, <font className="text-2xl">zoom,</font> <font className="text-xl">ms teams,</font> <font className="text-lg">trello,</font> <font className="text-base">outlook,</font> <font className="text-base">gcal, </font><font className="text-sm">notion,</font> <font className="text-xs">gmail...</font>?</font>
+          <font className="text-gray-300 text-3xl">slack, <font className="text-2xl">zoom,</font> <font className="text-xl">ms teams,</font> <font className="text-lg">trello,</font> <font className="text-base">outlook,</font> <font className="text-base">gcal, </font><font className="text-sm">notion,</font> <font className="text-xs">gmail...</font>?</font>
         </p>
 
         <p>
@@ -53,7 +53,7 @@ export default function Home() {
         </p>
 
         <p>
-          wanna test the beta? text us @ <font color="grey">949.237.2715</font>
+          wanna test the beta? text us @ <font className="text-gray-300">949.237.2715</font>
         </p>
 
         {/* <marquee
diff --git a/styles/globals.css b/styles/globals.css
index c25428a..1c80bb8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -52,6 +52,7 @@ main {
 p {
   font-family: 'Baloo Bhaijaan 2', cursive;
   font-size: 2em;
+  color:white;
 }
 
 #marquee-text {
