diff --git a/apps/classroomio-com/src/app.css b/apps/classroomio-com/src/app.css
index d2e957b5..2b1d15ef 100644
--- a/apps/classroomio-com/src/app.css
+++ b/apps/classroomio-com/src/app.css
@@ -1,3 +1,4 @@
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/apps/classroomio-com/src/lib/Hero/Hero.svelte b/apps/classroomio-com/src/lib/Hero/Hero.svelte
index 0514b378..790a26bb 100644
--- a/apps/classroomio-com/src/lib/Hero/Hero.svelte
+++ b/apps/classroomio-com/src/lib/Hero/Hero.svelte
@@ -1,9 +1,13 @@
 <script>
   import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { sineInOut } from 'svelte/easing';
   import { PUBLIC_ENABLE_USERS_COMPANIES } from '$env/static/public';
+  import HeroBackground from '$lib/Hero/HeroBackground.svelte';
 
   let width = '710';
   let height = '710';
+  let animate = false;
 
   onMount(() => {
     const handleResize = () => {
@@ -19,7 +23,10 @@
       }
     };
 
-    handleResize(); // Call it initially
+    handleResize();
+    setTimeout(() => {
+      animate = true;
+    }, 70);
 
     window.addEventListener('resize', handleResize);
     return () => {
@@ -28,50 +35,146 @@
   });
 </script>
 
-<div class="relative mt-[30%] border-b-2 text-center md:mt-36">
-  <div class="mb-10 flex w-full items-center justify-center">
-    <a
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      href="https://github.com/rotimi-best/classroomio"
-      style="color: rgb(75, 85, 99);"
-      class="rounded-full border border-gray-300 px-4 py-1 text-sm font-medium hover:underline"
-      >Give us a <span class="text-blue-700">star</span> on github</a
-    >
+<div
+  class="relative border-b-2 text-center bg-[#F5F8FE] h-[110vh] lg:h-[150vh] mt-[5%] overflow-hidden"
+>
+  <div class="overflow-hidden absolute h-full top-0 z-0">
+    <HeroBackground />
   </div>
-  <h1
-    class="mx-auto flex flex-col items-center text-3xl font-normal leading-[1.5] text-slate-900 md:text-4xl lg:text-6xl"
-  >
-    <span class="mb-2">Launch <span class="relative text-blue-700">Your</span> Online Bootcamp</span
-    >
-    <span class="relative text-blue-700"
-      >In Minutes
-      <svg
-        aria-hidden="true"
-        viewBox="0 0 418 42"
-        class="absolute right-[-20%] top-3/4 h-[0.58em] fill-indigo-300/70"
-        preserveAspectRatio="none"
-      >
-        <path
-          d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"
-        />
-      </svg>
-    </span>
-  </h1>
 
-  <p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-2/4 lg:p-0">
-    Meet a better learning management system (LMS) for teachers and students. ClassroomIO allows you
-    to launch and scale your online bootcamp with ease.
-  </p>
-  <div class="mt-10 flex flex-col items-center justify-center gap-4 md:flex-row">
-    <a
-      class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
-      href="/signup"
-      rel="noopener noreferrer nofollow"
+  <div class="z-30 absolute top-[13%] lg:top-[4%]">
+    <div class="mb-10 ml-[5%] lg:ml-0 flex w-full items-center justify-start lg:justify-center">
+      <a
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        href="/github"
+        style="color: rgb(75, 85, 99);"
+        class="rounded-full border-2 border-[#C2D2FF] px-4 py-1 text-sm font-medium bg-[#DCE5FF] text-[#4B5563]"
+        >Give us a <span class="text-blue-700">star</span> on github</a
+      >
+    </div>
+
+    <div class="justify-between w-[90%] absolute top-[3%] left-[4%] hidden lg:flex">
+      {#if animate}
+        <div
+          class="relative transition-all hover:scale-110 rotate-12"
+          transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
+        >
+          <a
+            href="/#collaboration"
+            class="px-6 py-2 border-[1.5px] border-[#3ADFEC] rounded-[4px] bg-white text-[#3ADFEC] text-lg font-bold"
+            >Collaboration</a
+          >
+          <svg
+            class="absolute -right-1 -bottom-2.5"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10.9223" height="10.9223" fill="#3ADFEC" />
+          </svg>
+        </div>
+
+        <div
+          class="relative transition-all hover:scale-110 -rotate-12"
+          transition:fly={{ x: 100, delay: 50, easing: sineInOut }}
+        >
+          <a
+            href="/github"
+            target="_blank"
+            class="px-6 py-2 border-[1.5px] border-[#BF0696] rounded-[4px] bg-white text-[#BF0696] text-lg font-bold"
+            >Open Source</a
+          >
+          <svg
+            class="absolute -right-1 -bottom-2.5"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10.9223" height="10.9223" fill="#BF0696" />
+          </svg>
+        </div>
+      {/if}
+    </div>
+
+    <h1
+      class="mx-auto w-[89%] pr-20 lg:pr-0 lg:w-[60%] text-left lg:text-center font-bold md:leading-[1.5] text-slate-900 text-5xl lg:text-7xl"
     >
-      Get Started for Free 🚀
-    </a>
-    <!-- <a
+      Launch Your Online Bootcamp <span class="text-blue-700">In Minutes </span>
+    </h1>
+
+    <p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
+      Meet a better learning management system (LMS) for teachers and students. ClassroomIO allows
+      you to launch and scale your online bootcamp with ease.
+    </p>
+
+    <div class="justify-between w-[90%] absolute top-[25%] left-[4%] hidden lg:flex">
+      {#if animate}
+        <div
+          class="relative transition-all hover:scale-110 -rotate-12"
+          transition:fly={{ x: -100, delay: 100, easing: sineInOut }}
+        >
+          <a
+            href="/#customization"
+            class="px-6 py-2 border-[1.5px] border-[#0233BD] rounded-[4px] bg-white text-[#0233BD] text-lg font-bold"
+            >Customizable LMS</a
+          >
+
+          <svg
+            class="absolute -right-1 -bottom-2.5"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10.9223" height="10.9223" fill="#0233BD" />
+          </svg>
+        </div>
+        <div
+          class="relative transition-all hover:scale-110 rotate-12"
+          transition:fly={{ y: 100, delay: 150, easing: sineInOut }}
+        >
+          <a
+            href="/#ai"
+            class="px-6 py-2 border-[1.5px] border-[#9747FF] rounded-[4px] bg-white text-[#9747FF] text-lg font-bold"
+            >AI Support</a
+          >
+
+          <svg
+            class="absolute -right-1 -bottom-2.5"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10.9223" height="10.9223" fill="#9747FF" />
+          </svg>
+        </div>
+      {/if}
+    </div>
+
+    <div class="my-10 flex flex-col items-center justify-center gap-4 md:flex-row">
+      <a
+        class="md:text-base w-11/12 rounded-md border-gray-200 border-2 px-6 py-3 text-sm font-medium text-center transition-all delay-100 hover:bg-black hover:text-white hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-4 lg:font-semibold"
+        href="/demo"
+        rel="noopener noreferrer nofollow"
+      >
+        Book a demo
+      </a>
+      <a
+        class="md:text-base w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-4 lg:font-semibold"
+        href="/signup"
+        rel="noopener noreferrer nofollow"
+      >
+        Get Started for Free
+      </a>
+      <!-- <a
       class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
       href="/github"
       target="_blank"
@@ -79,42 +182,30 @@
     >
       View on Github
     </a> -->
-  </div>
-
-  <div class="relative my-5 md:my-10">
-    <!-- <video
-      class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg"
-      autoplay
-      loop
-      muted
-      defaultMuted
-      playsinline
-      preload="auto"
-    >
-      <source src="./dark-light-mode.mp4" type="video/mp4" />
-      <track kind="captions" />
-    </video> -->
-
-    <img
-      loading="eager"
-      {width}
-      {height}
-      src="./cio-hero-imac.webp"
-      alt="hero section with dark vs light mode"
-      class="floating mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
-    />
-  </div>
-
-  {#if PUBLIC_ENABLE_USERS_COMPANIES}
-    <div class="mb-[10%] px-[15%]">
-      <h2 class="text-base font-semibold text-gray-900 lg:text-xl">Used at</h2>
-      <div class="flex w-full flex-row flex-wrap items-center justify-between gap-5 py-[5%]">
-        <img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
-        <img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
-        <img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
-        <img loading="lazy" src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" />
-        <img loading="lazy" src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" />
-      </div>
     </div>
-  {/if}
+
+    <div class="relative my-5 md:my-10">
+      <img
+        loading="eager"
+        {width}
+        {height}
+        src="./cio-hero.webp"
+        alt="hero section with dark vs light mode"
+        class="mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
+      />
+    </div>
+
+    {#if PUBLIC_ENABLE_USERS_COMPANIES}
+      <div class="mb-[10%] px-[15%]">
+        <h2 class="text-base font-semibold text-gray-900 lg:text-xl">Used at</h2>
+        <div class="flex w-full flex-row flex-wrap items-center justify-between gap-5 py-[5%]">
+          <img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <img loading="lazy" src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" />
+          <img loading="lazy" src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" />
+        </div>
+      </div>
+    {/if}
+  </div>
 </div>
diff --git a/apps/classroomio-com/src/lib/Hero/HeroBackground.svelte b/apps/classroomio-com/src/lib/Hero/HeroBackground.svelte
new file mode 100644
index 00000000..cc22fe7d
--- /dev/null
+++ b/apps/classroomio-com/src/lib/Hero/HeroBackground.svelte
@@ -0,0 +1,45 @@
+<svg
+  width="1444"
+  height="1628"
+  viewBox="0 0 1444 1628"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    class="path"
+    d="M1368.6 84.9V-16H1365.6V84.9H1276.7V-16H1273.7V84.9H1184.8V-16H1181.8V84.9H1092.9V-16H1089.9V84.9H1001V-16H998V84.9H909.1V-16H906.1V84.9H817.2V-16H814.2V84.9H725.3V-16H722.3V84.9H633.4V-16H630.4V84.9H541.5V-16H538.5V84.9H449.6V-16H446.6V84.9H357.7V-16H354.7V84.9H265.8V-16H262.8V84.9H173.9V-16H170.9V84.9H81.9V-16H78.9V84.9H-10V87.9H78.9V188.8H-10V191.8H78.9V292.7H-10V295.7H78.9V396.6H-10V399.6H78.9V500.5H-10V503.5H78.9V604.4H-10V607.4H78.9V708.3H-10V711.3H78.9V812.2H-10V815.2H78.9V916.1H-10V919.1H78.9V1020H-10V1023H78.9V1124H-10V1127H78.9V1227.9H-10V1230.9H78.9V1331.8H-10V1334.8H78.9V1435.7H-10V1438.7H78.9V1539.6H-10V1542.6H78.9V1643.5H81.9V1542.6H170.8V1643.5H173.8V1542.6H262.7V1643.5H265.7V1542.6H354.6V1643.5H357.6V1542.6H446.5V1643.5H449.5V1542.6H538.4V1643.5H541.4V1542.6H630.3V1643.5H633.3V1542.6H722.2V1643.5H725.2V1542.6H814.1V1643.5H817.1V1542.6H906V1643.5H909V1542.6H997.9V1643.5H1000.9V1542.6H1089.8V1643.5H1092.8V1542.6H1181.7V1643.5H1184.7V1542.6H1273.6V1643.5H1276.6V1542.6H1365.5V1643.5H1368.5V1542.6H1457.4V1539.6H1368.5V1438.7H1457.4V1435.7H1368.5V1334.8H1457.4V1331.8H1368.5V1230.9H1457.4V1227.9H1368.5V1127H1457.4V1124H1368.5V1023.1H1457.4V1020.1H1368.5V919.2H1457.4V916.2H1368.5V815.3H1457.4V812.3H1368.5V711.4H1457.4V708.4H1368.5V607.5H1457.4V604.5H1368.5V503.5H1457.4V500.5H1368.5V399.6H1457.4V396.6H1368.5V295.7H1457.4V292.7H1368.5V191.8H1457.4V188.8H1368.5V87.9H1457.4V84.9H1368.6ZM170.8 1539.6H81.9V1438.7H170.8V1539.6ZM170.8 1435.7H81.9V1334.8H170.8V1435.7ZM170.8 1331.8H81.9V1230.9H170.8V1331.8ZM170.8 1227.9H81.9V1127H170.8V1227.9ZM170.8 1124H81.9V1023.1H170.8V1124ZM170.8 1020.1H81.9V919.2H170.8V1020.1ZM170.8 916.2H81.9V815.3H170.8V916.2ZM170.8 812.3H81.9V711.4H170.8V812.3ZM170.8 708.4H81.9V607.5H170.8V708.4ZM170.8 604.5H81.9V503.5H170.8V604.5ZM170.8 500.5H81.9V399.6H170.8V500.5ZM170.8 396.6H81.9V295.7H170.8V396.6ZM170.8 292.7H81.9V191.8H170.8V292.7ZM170.8 188.8H81.9V87.9H170.8V188.8ZM262.7 1539.6H173.8V1438.7H262.7V1539.6ZM262.7 1435.7H173.8V1334.8H262.7V1435.7ZM262.7 1331.8H173.8V1230.9H262.7V1331.8ZM262.7 1227.9H173.8V1127H262.7V1227.9ZM262.7 1124H173.8V1023.1H262.7V1124ZM262.7 1020.1H173.8V919.2H262.7V1020.1ZM262.7 916.2H173.8V815.3H262.7V916.2ZM262.7 812.3H173.8V711.4H262.7V812.3ZM262.7 708.4H173.8V607.5H262.7V708.4ZM262.7 604.5H173.8V503.5H262.7V604.5ZM262.7 500.5H173.8V399.6H262.7V500.5ZM262.7 396.6H173.8V295.7H262.7V396.6ZM262.7 292.7H173.8V191.8H262.7V292.7ZM262.7 188.8H173.8V87.9H262.7V188.8ZM354.6 1539.6H265.7V1438.7H354.6V1539.6ZM354.6 1435.7H265.7V1334.8H354.6V1435.7ZM354.6 1331.8H265.7V1230.9H354.6V1331.8ZM354.6 1227.9H265.7V1127H354.6V1227.9ZM354.6 1124H265.7V1023.1H354.6V1124ZM354.6 1020.1H265.7V919.2H354.6V1020.1ZM354.6 916.2H265.7V815.3H354.6V916.2ZM354.6 812.3H265.7V711.4H354.6V812.3ZM354.6 708.4H265.7V607.5H354.6V708.4ZM354.6 604.5H265.7V503.5H354.6V604.5ZM354.6 500.5H265.7V399.6H354.6V500.5ZM354.6 396.6H265.7V295.7H354.6V396.6ZM354.6 292.7H265.7V191.8H354.6V292.7ZM354.6 188.8H265.7V87.9H354.6V188.8ZM446.5 1539.6H357.6V1438.7H446.5V1539.6ZM446.5 1435.7H357.6V1334.8H446.5V1435.7ZM446.5 1331.8H357.6V1230.9H446.5V1331.8ZM446.5 1227.9H357.6V1127H446.5V1227.9ZM446.5 1124H357.6V1023.1H446.5V1124ZM446.5 1020.1H357.6V919.2H446.5V1020.1ZM446.5 916.2H357.6V815.3H446.5V916.2ZM446.5 812.3H357.6V711.4H446.5V812.3ZM446.5 708.4H357.6V607.5H446.5V708.4ZM446.5 604.5H357.6V503.5H446.5V604.5ZM446.5 500.5H357.6V399.6H446.5V500.5ZM446.5 396.6H357.6V295.7H446.5V396.6ZM446.5 292.7H357.6V191.8H446.5V292.7ZM446.5 188.8H357.6V87.9H446.5V188.8ZM538.5 1539.6H449.6V1438.7H538.5V1539.6ZM538.5 1435.7H449.6V1334.8H538.5V1435.7ZM538.5 1331.8H449.6V1230.9H538.5V1331.8ZM538.5 1227.9H449.6V1127H538.5V1227.9ZM538.5 1124H449.6V1023.1H538.5V1124ZM538.5 1020.1H449.6V919.2H538.5V1020.1ZM538.5 916.2H449.6V815.3H538.5V916.2ZM538.5 812.3H449.6V711.4H538.5V812.3ZM538.5 708.4H449.6V607.5H538.5V708.4ZM538.5 604.5H449.6V503.5H538.5V604.5ZM538.5 500.5H449.6V399.6H538.5V500.5ZM538.5 396.6H449.6V295.7H538.5V396.6ZM538.5 292.7H449.6V191.8H538.5V292.7ZM538.5 188.8H449.6V87.9H538.5V188.8ZM630.4 1539.6H541.5V1438.7H630.4V1539.6ZM630.4 1435.7H541.5V1334.8H630.4V1435.7ZM630.4 1331.8H541.5V1230.9H630.4V1331.8ZM630.4 1227.9H541.5V1127H630.4V1227.9ZM630.4 1124H541.5V1023.1H630.4V1124ZM630.4 1020.1H541.5V919.2H630.4V1020.1ZM630.4 916.2H541.5V815.3H630.4V916.2ZM630.4 812.3H541.5V711.4H630.4V812.3ZM630.4 708.4H541.5V607.5H630.4V708.4ZM630.4 604.5H541.5V503.5H630.4V604.5ZM630.4 500.5H541.5V399.6H630.4V500.5ZM630.4 396.6H541.5V295.7H630.4V396.6ZM630.4 292.7H541.5V191.8H630.4V292.7ZM630.4 188.8H541.5V87.9H630.4V188.8ZM722.3 1539.6H633.4V1438.7H722.3V1539.6ZM722.3 1435.7H633.4V1334.8H722.3V1435.7ZM722.3 1331.8H633.4V1230.9H722.3V1331.8ZM722.3 1227.9H633.4V1127H722.3V1227.9ZM722.3 1124H633.4V1023.1H722.3V1124ZM722.3 1020.1H633.4V919.2H722.3V1020.1ZM722.3 916.2H633.4V815.3H722.3V916.2ZM722.3 812.3H633.4V711.4H722.3V812.3ZM722.3 708.4H633.4V607.5H722.3V708.4ZM722.3 604.5H633.4V503.5H722.3V604.5ZM722.3 500.5H633.4V399.6H722.3V500.5ZM722.3 396.6H633.4V295.7H722.3V396.6ZM722.3 292.7H633.4V191.8H722.3V292.7ZM722.3 188.8H633.4V87.9H722.3V188.8ZM814.2 1539.6H725.3V1438.7H814.2V1539.6ZM814.2 1435.7H725.3V1334.8H814.2V1435.7ZM814.2 1331.8H725.3V1230.9H814.2V1331.8ZM814.2 1227.9H725.3V1127H814.2V1227.9ZM814.2 1124H725.3V1023.1H814.2V1124ZM814.2 1020.1H725.3V919.2H814.2V1020.1ZM814.2 916.2H725.3V815.3H814.2V916.2ZM814.2 812.3H725.3V711.4H814.2V812.3ZM814.2 708.4H725.3V607.5H814.2V708.4ZM814.2 604.5H725.3V503.5H814.2V604.5ZM814.2 500.5H725.3V399.6H814.2V500.5ZM814.2 396.6H725.3V295.7H814.2V396.6ZM814.2 292.7H725.3V191.8H814.2V292.7ZM814.2 188.8H725.3V87.9H814.2V188.8ZM906.1 1539.6H817.2V1438.7H906.1V1539.6ZM906.1 1435.7H817.2V1334.8H906.1V1435.7ZM906.1 1331.8H817.2V1230.9H906.1V1331.8ZM906.1 1227.9H817.2V1127H906.1V1227.9ZM906.1 1124H817.2V1023.1H906.1V1124ZM906.1 1020.1H817.2V919.2H906.1V1020.1ZM906.1 916.2H817.2V815.3H906.1V916.2ZM906.1 812.3H817.2V711.4H906.1V812.3ZM906.1 708.4H817.2V607.5H906.1V708.4ZM906.1 604.5H817.2V503.5H906.1V604.5ZM906.1 500.5H817.2V399.6H906.1V500.5ZM906.1 396.6H817.2V295.7H906.1V396.6ZM906.1 292.7H817.2V191.8H906.1V292.7ZM906.1 188.8H817.2V87.9H906.1V188.8ZM998 1539.6H909.1V1438.7H998V1539.6ZM998 1435.7H909.1V1334.8H998V1435.7ZM998 1331.8H909.1V1230.9H998V1331.8ZM998 1227.9H909.1V1127H998V1227.9ZM998 1124H909.1V1023.1H998V1124ZM998 1020.1H909.1V919.2H998V1020.1ZM998 916.2H909.1V815.3H998V916.2ZM998 812.3H909.1V711.4H998V812.3ZM998 708.4H909.1V607.5H998V708.4ZM998 604.5H909.1V503.5H998V604.5ZM998 500.5H909.1V399.6H998V500.5ZM998 396.6H909.1V295.7H998V396.6ZM998 292.7H909.1V191.8H998V292.7ZM998 188.8H909.1V87.9H998V188.8ZM1089.9 1539.6H1001V1438.7H1089.9V1539.6ZM1089.9 1435.7H1001V1334.8H1089.9V1435.7ZM1089.9 1331.8H1001V1230.9H1089.9V1331.8ZM1089.9 1227.9H1001V1127H1089.9V1227.9ZM1089.9 1124H1001V1023.1H1089.9V1124ZM1089.9 1020.1H1001V919.2H1089.9V1020.1ZM1089.9 916.2H1001V815.3H1089.9V916.2ZM1089.9 812.3H1001V711.4H1089.9V812.3ZM1089.9 708.4H1001V607.5H1089.9V708.4ZM1089.9 604.5H1001V503.5H1089.9V604.5ZM1089.9 500.5H1001V399.6H1089.9V500.5ZM1089.9 396.6H1001V295.7H1089.9V396.6ZM1089.9 292.7H1001V191.8H1089.9V292.7ZM1089.9 188.8H1001V87.9H1089.9V188.8ZM1181.8 1539.6H1092.9V1438.7H1181.8V1539.6ZM1181.8 1435.7H1092.9V1334.8H1181.8V1435.7ZM1181.8 1331.8H1092.9V1230.9H1181.8V1331.8ZM1181.8 1227.9H1092.9V1127H1181.8V1227.9ZM1181.8 1124H1092.9V1023.1H1181.8V1124ZM1181.8 1020.1H1092.9V919.2H1181.8V1020.1ZM1181.8 916.2H1092.9V815.3H1181.8V916.2ZM1181.8 812.3H1092.9V711.4H1181.8V812.3ZM1181.8 708.4H1092.9V607.5H1181.8V708.4ZM1181.8 604.5H1092.9V503.5H1181.8V604.5ZM1181.8 500.5H1092.9V399.6H1181.8V500.5ZM1181.8 396.6H1092.9V295.7H1181.8V396.6ZM1181.8 292.7H1092.9V191.8H1181.8V292.7ZM1181.8 188.8H1092.9V87.9H1181.8V188.8ZM1273.7 1539.6H1184.8V1438.7H1273.7V1539.6ZM1273.7 1435.7H1184.8V1334.8H1273.7V1435.7ZM1273.7 1331.8H1184.8V1230.9H1273.7V1331.8ZM1273.7 1227.9H1184.8V1127H1273.7V1227.9ZM1273.7 1124H1184.8V1023.1H1273.7V1124ZM1273.7 1020.1H1184.8V919.2H1273.7V1020.1ZM1273.7 916.2H1184.8V815.3H1273.7V916.2ZM1273.7 812.3H1184.8V711.4H1273.7V812.3ZM1273.7 708.4H1184.8V607.5H1273.7V708.4ZM1273.7 604.5H1184.8V503.5H1273.7V604.5ZM1273.7 500.5H1184.8V399.6H1273.7V500.5ZM1273.7 396.6H1184.8V295.7H1273.7V396.6ZM1273.7 292.7H1184.8V191.8H1273.7V292.7ZM1273.7 188.8H1184.8V87.9H1273.7V188.8ZM1365.6 1539.6H1276.7V1438.7H1365.6V1539.6ZM1365.6 1435.7H1276.7V1334.8H1365.6V1435.7ZM1365.6 1331.8H1276.7V1230.9H1365.6V1331.8ZM1365.6 1227.9H1276.7V1127H1365.6V1227.9ZM1365.6 1124H1276.7V1023.1H1365.6V1124ZM1365.6 1020.1H1276.7V919.2H1365.6V1020.1ZM1365.6 916.2H1276.7V815.3H1365.6V916.2ZM1365.6 812.3H1276.7V711.4H1365.6V812.3ZM1365.6 708.4H1276.7V607.5H1365.6V708.4ZM1365.6 604.5H1276.7V503.5H1365.6V604.5ZM1365.6 500.5H1276.7V399.6H1365.6V500.5ZM1365.6 396.6H1276.7V295.7H1365.6V396.6ZM1365.6 292.7H1276.7V191.8H1365.6V292.7ZM1365.6 188.8H1276.7V87.9H1365.6V188.8Z"
+    stroke="url(#paint0_radial_4830_21534)"
+    stroke-width="2"
+  />
+  <defs>
+    <radialGradient
+      id="paint0_radial_4830_21534"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(723.779 813.774) scale(783.249 783.249)"
+    >
+      <stop offset="0.175" stop-color="white" />
+      <stop offset="0.855" stop-color="#E8EFFF" />
+      <stop offset="0.86" stop-color="#E8EFFF" />
+    </radialGradient>
+  </defs>
+</svg>
+
+<style>
+  .path {
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation: dash 5s linear alternate infinite;
+  }
+
+  @keyframes dash {
+    from {
+      stroke-dashoffset: 822;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+</style>
diff --git a/apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte b/apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte
index c5377e4b..e85fc61c 100644
--- a/apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte
+++ b/apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte
@@ -11,11 +11,11 @@
     Our customers love us. Here's why you will too:
   </p>
   <a
-    class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
+    class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
     href="/signup"
     rel="noopener noreferrer nofollow"
   >
-    Get Started for Free 🚀
+    Get Started for Free
   </a>
 
   <div class="relative my-5 md:my-10 w-[85%] lg:w-[70%]">
diff --git a/apps/classroomio-com/static/cio-hero-imac.webp b/apps/classroomio-com/static/cio-hero-imac.webp
deleted file mode 100644
index 91dd95a4..00000000
Binary files a/apps/classroomio-com/static/cio-hero-imac.webp and /dev/null differ
diff --git a/apps/classroomio-com/static/cio-hero.webp b/apps/classroomio-com/static/cio-hero.webp
new file mode 100644
index 00000000..db5423e6
Binary files /dev/null and b/apps/classroomio-com/static/cio-hero.webp differ