diff --git a/src/app/button.css b/src/app/button.css
index 7ede9fc..e377160 100644
--- a/src/app/button.css
+++ b/src/app/button.css
@@ -1,29 +1,19 @@
-/* * {
-  box-sizing: border-box;
-  margin: 0;
-}
-body {
-  min-height: 100vh;
-  font-size: 6rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #190c40;
-} */
 .rainbow-container {
   z-index: 1;
   transform: rotate(0deg) translateZ(0);
   transform-origin: center center;
-  width: 1em;
-  height: 1em;
+  width: clamp(3rem, 50vw, 15rem);
+  height: clamp(3rem, 50vw, 15rem);
   border: 0.1px solid rgba(255, 255, 255, 0.4);
   -webkit-animation: rainbow 3s infinite linear;
-  border-radius: 0.5em;
+  border-radius: 50%;
   box-shadow: 0 0 0.3em 0.05em #2c116e, inset 0.03em 0 0.1em 0.02em #de66e4;
   transform-style: preserve-3d;
   perspective: 1em;
-  /* background-color: rgba(0, 0, 0, 1); */
+  position: relative;
+  overflow: hidden;
 }
+
 @keyframes rainbow {
   0% {
     transform: rotate(0deg) translateZ(0);
@@ -46,17 +36,16 @@ body {
     box-shadow: 0 0 0.3em 0.05em #28126a, inset 0.03em 0 0.1em 0.02em #de66e4;
   }
 }
-.rainbow-container {
-  position: relative;
-}
+
 .rainbow-container > div {
   position: absolute;
-  top: 0.1em;
-  left: 0.1em;
-  width: 0.8em;
-  height: 0.8em;
+  top: 5%;
+  left: 15%;
+  width: 70%;
+  height: 70%;
   border-radius: 50%;
 }
+
 .green {
   background: -webkit-linear-gradient(
     left,
@@ -65,8 +54,9 @@ body {
     rgba(115, 213, 186, 0.8) 100%
   );
   transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0);
-  animation: curve-rotate-green 6s infinite linear;
+  animation: curve-rotate-green 4s infinite linear;
 }
+
 .pink {
   background: -webkit-linear-gradient(
     left,
@@ -75,41 +65,9 @@ body {
     rgba(215, 115, 229, 0.8) 100%
   );
   transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0);
-  animation: curve-rotate-pink 3s infinite linear;
-}
-@-webkit-keyframes curve-rotate-green {
-  0% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
-  }
-  50% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
-  }
-  100% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
-  }
-}
-@-moz-keyframes curve-rotate-green {
-  0% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
-  }
-  50% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
-  }
-  100% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
-  }
-}
-@-o-keyframes curve-rotate-green {
-  0% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
-  }
-  50% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
-  }
-  100% {
-    transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
-  }
+  animation: curve-rotate-pink 4s infinite linear;
 }
+
 @keyframes curve-rotate-green {
   0% {
     transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
@@ -121,47 +79,22 @@ body {
     transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
   }
 }
-@-webkit-keyframes curve-rotate-pink {
-  0% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
-  }
-  50% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
-  }
-  100% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
-  }
-}
-@-moz-keyframes curve-rotate-pink {
-  0% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
-  }
-  50% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
-  }
-  100% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
-  }
-}
-@-o-keyframes curve-rotate-pink {
+
+@keyframes curve-rotate-pink {
   0% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
+    transform: rotateY(180deg) skew(24deg) rotate3d(1.1, 1, 0.9, 0deg);
   }
   50% {
     transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
   }
   100% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
+    transform: rotateY(180deg) skew(24deg) rotate3d(1.1, 1, 0.9, 360deg);
   }
 }
-@keyframes curve-rotate-pink {
-  0% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
-  }
-  50% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 180deg);
-  }
-  100% {
-    transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 360deg);
+
+@media (min-width: 768px) {
+  .rainbow-container {
+    width: 70px;
+    height: 70px;
   }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 467ff57..01d3341 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,18 +2,19 @@ import React from "react";
 import AssistantButton from "@/components/AssistantButton/AssistantButton";
 import Image from "next/image";
 
-export default function page() {
+export default function Page() {
   return (
-    <div>
+    <>
+      {/* Desktop Layout */}
       <div className="hidden md:block">
         <main className="flex min-h-screen flex-col justify-center items-center p-24">
           <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
             <Image
-              className=""
               src="/font2.png"
               alt="Main Logo"
               width={650}
               height={100}
+              priority
             />
           </div>
         </main>
@@ -21,14 +22,25 @@ export default function page() {
           <AssistantButton />
         </div>
       </div>
-      <div className="md:hidden">
-        <main className="flex min-h-screen flex-col justify-center items-center p-24">
-          <div className=" font-semibold text-xl relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-            Please use a desktop browser for the best experience. (I'm working
-            on a mobile version)
+
+      {/* Mobile Layout */}
+      <div className="md:hidden flex min-h-screen flex-col items-center">
+        <div className="flex-1 flex flex-col items-center justify-center w-full px-4">
+          <div className="relative flex place-items-center w-[80vw] mb-16 before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+            <Image
+              src="/font2.png"
+              alt="Main Logo"
+              width={300}
+              height={50}
+              priority
+              className="w-full h-auto"
+            />
           </div>
-        </main>
+          <div className="w-full flex justify-center">
+            <AssistantButton />
+          </div>
+        </div>
       </div>
-    </div>
+    </>
   );
 }