diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx
index 67c81afc6c9..155c4b4c819 100644
--- a/apps/www/components/Hero/Hero.tsx
+++ b/apps/www/components/Hero/Hero.tsx
@@ -36,14 +36,14 @@ const Hero = () => {
                         xl:text-7xl
                         "
                   >
-                    <span className="block text-[#F4FFFA00] bg-clip-text bg-gradient-to-b from-scale-1200 to-scale-1100">
+                    <span className="block text-[#F4FFFA00] bg-clip-text bg-gradient-to-b from-scale-1200 to-scale-1200 dark:to-scale-1100">
                       Build in a weekend
                     </span>
-                    <span className="text-transparent bg-clip-text bg-gradient-to-br from-[#3ECF8E] via-[#3ECF8E] to-[#3E9BCF] block md:ml-0">
+                    <span className="text-transparent bg-clip-text bg-gradient-to-br from-[#3ECF8E] via-[#3ECF8E] to-[#3ecfb2] block md:ml-0">
                       Scale to millions
                     </span>
                   </h1>
-                  <p className="pt-2 text-scale-1200 !mb-0 mt-1.5 text-sm sm:mt-5 sm:text-base lg:text-lg">
+                  <p className="pt-2 text-scale-1200 !mb-0 mt-1.5 text-sm sm:mt-5 sm:text-base lg:text-xl">
                     Supabase is an open source Firebase alternative for building secure and
                     performant Postgres backends with minimal configuration.
                   </p>
@@ -51,14 +51,14 @@ const Hero = () => {
                 <div className="flex items-center gap-2">
                   <Link href="https://app.supabase.com" as="https://app.supabase.com" passHref>
                     <a onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_startProject'])}>
-                      <Button size="small" className="text-white">
+                      <Button size="large" className="text-white">
                         Start your project
                       </Button>
                     </a>
                   </Link>
                   <Link href="/docs" as="/docs" passHref>
                     <a onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_documentation'])}>
-                      <Button size="small" type="default" icon={<IconBookOpen />}>
+                      <Button size="large" type="default" icon={<IconBookOpen />}>
                         Documentation
                       </Button>
                     </a>
@@ -70,7 +70,7 @@ const Hero = () => {
           </div>
         </div>
       </SectionContainer>
-      <HeroBackground />
+      {/* <HeroBackground /> */}
     </div>
   )
 }
diff --git a/apps/www/components/Hero/hero.module.css b/apps/www/components/Hero/hero.module.css
index 414f97074f7..24cc50daf25 100644
--- a/apps/www/components/Hero/hero.module.css
+++ b/apps/www/components/Hero/hero.module.css
@@ -6,7 +6,7 @@
 .hero-text {
   opacity: 0;
   transform: translate3d(0, 10px, 0);
-  animation: animateText 0.4s cubic-bezier(0.25, 0.25, 0, 1) 0.1s both;
+  animation: animateText 1s cubic-bezier(0.25, 0.25, 0, 1) 0.1s both;
 }
 
 .hero-grid-lines {
diff --git a/apps/www/components/ShinyBox/index.tsx b/apps/www/components/ShinyBox/index.tsx
index 0cc6bc084b8..5684b7606af 100644
--- a/apps/www/components/ShinyBox/index.tsx
+++ b/apps/www/components/ShinyBox/index.tsx
@@ -18,9 +18,9 @@ const ShinyBox = ({
     const { x: elX, y: elY, width, height } = outerElement.getBoundingClientRect()
     x = event.clientX - elX
     y = event.clientY - elY
-    const isActive = x > -15 && x < width + 15 && y > -15 && y < height + 15
+    const isActive = x > -0 && x < width + 0 && y > -0 && y < height + 0
     const activeGlow = isActive
-      ? `radial-gradient(65rem circle at ${x}px ${y}px, var(--colors-brand8), transparent), `
+      ? `radial-gradient(65rem circle at ${x}px ${y}px, var(--colors-brand9), transparent), `
       : ''
     outerElement.style.background = isActive ? `var(--colors-brand9)` : `var(--colors-scale3)`
     outerElement.style.backgroundImage = `