diff --git a/public/videos/cta.mp4 b/public/videos/cta.mp4
new file mode 100644
index 0000000..cab79a0
Binary files /dev/null and b/public/videos/cta.mp4 differ
diff --git a/src/components/CallToAction.tsx b/src/components/CallToAction.tsx
index 49bb4aa..09d0152 100644
--- a/src/components/CallToAction.tsx
+++ b/src/components/CallToAction.tsx
@@ -6,25 +6,37 @@ export function CallToAction() {
   return (
     <section
       id="get-free-shares-today"
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+      className="relative overflow-hidden py-20 sm:py-28"
     >
-      <div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute top-0 left-0 w-full h-full object-cover z-0"
+      >
+        <source src="/videos/cta.mp4" type="video/mp4" />
+      </video>
+      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 z-10"></div>
+      <div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2 z-20">
         <CircleBackground color="#fff" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
+      <Container className="relative z-20">
         <div className="mx-auto max-w-md sm:text-center">
           <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
-          Decentralized AI Agents that are Truly Yours
+            Decentralized AI Agents that are Truly Yours
           </h2>
           <p className="mt-4 text-lg text-gray-300">
-          Why hand out your intelligence to centralized giants when you can build your own. Ready to own your intelligence?
+            Why hand out your intelligence to centralized giants when you can
+            build your own. Ready to own your intelligence?
           </p>
           <div className="mt-8 flex justify-center gap-x-6">
-            <Button
-            variant="solid"
-              href="#">Book a Meeting</Button>
-            <Button href="#"
-              variant="outline">Join the Waitlist</Button>
+            <Button variant="solid" href="#">
+              Book a Meeting
+            </Button>
+            <Button href="#" variant="outline">
+              Join the Waitlist
+            </Button>
           </div>
         </div>
       </Container>
diff --git a/src/components/GetStarted.tsx b/src/components/GetStarted.tsx
index b1dc7e8..cf1d8b0 100644
--- a/src/components/GetStarted.tsx
+++ b/src/components/GetStarted.tsx
@@ -10,18 +10,21 @@ export  function GetStarted() {
       description:
         "Learn how Mycelium works and get a high-level understanding of its architecture, deployment, and API references.",
       href: "/docs",
+      buttonText: "Docs",
     },
     {
       title: "Mycelium Repository",
       description:
         "Explore the official code repositories, contribute, and stay up-to-date with the latest changes.",
       href: "https://github.com/your-repo", // replace with actual repo
+      buttonText: "Explore",
     },
     {
       title: "Mycelium Support",
       description:
         "Need help? Reach out to our support team or join the community to get your questions answered quickly.",
       href: "/support",
+      buttonText: "Support",
     },
   ];
 
@@ -41,13 +44,22 @@ export  function GetStarted() {
         {items.map((item, idx) => (
           <div
             key={idx}
-            className="flex flex-col justify-between border border-white/10 rounded-2xl p-6 hover:border-white/20 transition bg-black/20"
+            className="relative flex flex-col justify-between overflow-hidden rounded-2xl border border-white/10 bg-black/40 p-6 shadow-md shadow-gray-900/5 transition-all duration-300 ease-out hover:scale-105 hover:border-white/40 hover:bg-black/60"
+            style={{
+              filter: 'brightness(1)',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.filter = 'brightness(0.8)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.filter = 'brightness(1)';
+            }}
           >
             {/* Title + Button Row */}
             <div className="flex items-center justify-between">
               <h3 className="text-xl font-semibold">{item.title}</h3>
               <Button variant="outline" href={item.href}>
-                View All
+                {item.buttonText}
               </Button>
             </div>