diff --git a/frontend/src/components/LandingComponents/Hero/Hero.tsx b/frontend/src/components/LandingComponents/Hero/Hero.tsx
index 73afe01f..ddbb9e32 100644
--- a/frontend/src/components/LandingComponents/Hero/Hero.tsx
+++ b/frontend/src/components/LandingComponents/Hero/Hero.tsx
@@ -3,6 +3,7 @@ import { Button } from '../../ui/button';
 import { buttonVariants } from '../../ui/button';
 import { HeroCards } from './HeroCards';
 import { GitHubLogoIcon } from '@radix-ui/react-icons';
+import { motion } from 'framer-motion';
 
 export const Hero = () => {
   return (
@@ -51,7 +52,25 @@ export const Hero = () => {
         <HeroCards />
       </div>
 
-      <div className="shadow"></div>
+      <motion.div
+        className="absolute top-[200px] w-[300px] h-[400px] lg:w-[400px] lg:h-[400px] md:top-[150px] md:w-[200px] md:h-[300px]"
+        style={{
+          filter: 'blur(150px)',
+        }}
+        animate={{
+          background: [
+            'hsla(330, 100%, 50%, 20%)',
+            'hsla(240, 100%, 50%, 80%)',
+            'hsla(330, 100%, 50%, 20%)',
+          ],
+          right: ['460px', '160px', '460px'],
+        }}
+        transition={{
+          duration: 8,
+          repeat: Infinity,
+          ease: 'linear',
+        }}
+      />
     </section>
   );
 };
diff --git a/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap b/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
index 3c459e6d..d05f52ea 100644
--- a/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
+++ b/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
@@ -84,7 +84,8 @@ exports[`Hero component using snapshot renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="shadow"
+      class="absolute top-[200px] w-[300px] h-[400px] lg:w-[400px] lg:h-[400px] md:top-[150px] md:w-[200px] md:h-[300px]"
+      style="filter: blur(150px);"
     />
   </section>
 </DocumentFragment>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f2c53fa9..cc1c72cc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,65 +1,3 @@
 html {
   scroll-behavior: smooth;
 }
-
-/* HeroCards background shadow */
-.shadow {
-  position: absolute;
-  background: hsla(330, 100%, 50%, 0%);
-  border-radius: 24px;
-  rotate: 35deg;
-
-  width: 260px;
-  top: 200px;
-  height: 400px;
-  filter: blur(150px);
-  animation: shadow-slide infinite 4s linear alternate;
-}
-
-@keyframes shadow-slide {
-  from {
-    background: hsla(330, 100%, 50%, 20%); /* Pink shadow color */
-    right: 460px;
-  }
-  to {
-    background: hsla(240, 100%, 50%, 80%); /* Blue shadow color */
-    right: 160px;
-  }
-}
-
-@media (max-width: 1024px) {
-  .shadow {
-    top: 70px;
-  }
-
-  @keyframes shadow-slide {
-    from {
-      background: hsla(330, 100%, 50%, 20%); /* Pink shadow color */
-      right: 460px;
-    }
-    to {
-      background: hsla(240, 100%, 50%, 50%); /* Blue shadow color */
-      right: 160px;
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .shadow {
-    top: 70px;
-    width: 100px;
-    height: 350px;
-    filter: blur(60px);
-  }
-
-  @keyframes shadow-slide {
-    from {
-      background: hsla(330, 100%, 50%, 20%); /* Pink shadow color */
-      right: 280px;
-    }
-    to {
-      background: hsla(240, 100%, 50%, 30%); /* Blue shadow color */
-      right: 100px;
-    }
-  }
-}