diff --git a/public/images/cloud.png b/public/images/cloud.png
new file mode 100644
index 0000000..ce6fa52
Binary files /dev/null and b/public/images/cloud.png differ
diff --git a/public/images/phone-frame.svg b/public/images/phone-frame.svg
index 369d9e8..c11255f 100644
--- a/public/images/phone-frame.svg
+++ b/public/images/phone-frame.svg
@@ -214,7 +214,7 @@
     </filter>
     <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0 727 -642 0 184 1)">
-      <stop stop-color="#FAFAFA" />
+      <stop stop-color="#FFFFFF" />
       <stop offset="1" stop-color="#E6E6E6" />
     </radialGradient>
     <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 47e48ae..3c4f5b7 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -4,7 +4,7 @@ import { Footer } from './Footer'
 
 export function Layout() {
   return (
-    <div className="bg-gray-50 antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
+    <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
       <Header />
       <main>
         <Outlet />
diff --git a/src/images/phone-frame.svg b/src/images/phone-frame.svg
index 369d9e8..c11255f 100644
--- a/src/images/phone-frame.svg
+++ b/src/images/phone-frame.svg
@@ -214,7 +214,7 @@
     </filter>
     <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0 727 -642 0 184 1)">
-      <stop stop-color="#FAFAFA" />
+      <stop stop-color="#FFFFFF" />
       <stop offset="1" stop-color="#E6E6E6" />
     </radialGradient>
     <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
diff --git a/src/pages/agents/GallerySection.tsx b/src/pages/agents/GallerySection.tsx
index 9c94eb3..84057f6 100644
--- a/src/pages/agents/GallerySection.tsx
+++ b/src/pages/agents/GallerySection.tsx
@@ -48,7 +48,7 @@ export function GallerySection() {
   const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
 
   return (
-    <div className="bg-[#FAFAFA]">
+    <div className="bg-white">
       <div className="relative isolate pt-8 pb-0 text-center w-full">
         <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
           <div className="mx-auto max-w-5xl lg:mt-12">
diff --git a/src/pages/home/HomeHero.tsx b/src/pages/home/HomeHero.tsx
index 6cead4e..907aebe 100644
--- a/src/pages/home/HomeHero.tsx
+++ b/src/pages/home/HomeHero.tsx
@@ -1,36 +1,37 @@
-import { motion } from 'framer-motion'
-import { TypeAnimation } from 'react-type-animation'
-import { Container } from '../../components/Container'
+'use client'
+
+import { H1, P } from '@/components/Texts'
+import { FadeIn } from '@/components/FadeIn'
+import { Button } from '@/components/Button'
 
 export function HomeHero() {
   return (
-    <section className="relative bg-white py-20 lg:py-32">
-      <Container>
-        <div className="mx-auto max-w-4xl text-center">
-          <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
-            <TypeAnimation
-              sequence={[
-                'Decentralized Autonomous Agentic Cloud.',
-                1000,
-              ]}
-              wrapper="span"
-              speed={50}
-              repeat={0}
-            />
-          </h1>
-
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1, delay: 1 }}
-            className="mt-8"
-          >
-            <p className="text-lg lg:text-xl text-gray-600">
-              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-            </p>
-          </motion.div>
+    <div
+      className="relative isolate overflow-hidden bg-white"
+      style={{
+        backgroundImage: 'url(/images/cloud.png)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className="mx-auto max-w-7xl px-6  py-24 lg:py-32 lg:flex lg:px-8">
+        <div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
+          <H1 color="primary" className="mt-10 text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
+            Decentralized Autonomous Agentic Cloud.
+          </H1>
+          <P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
+            Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
+          </P>
+          <div className="mt-10 flex items-center gap-x-6">
+            <Button variant="solid" color="cyan" href="#">
+              Get started
+            </Button>
+            <a href="#" className="text-sm/6 font-semibold text-gray-50">
+              Learn more <span aria-hidden="true">→</span>
+            </a>
+          </div>
         </div>
-      </Container>
-    </section>
+      </div>
+    </div>
   )
 }