diff --git a/src/components/Homepage/AnimatedGIF.tsx b/src/components/Homepage/AnimatedGIF.tsx
new file mode 100644
index 000000000..76ae98072
--- /dev/null
+++ b/src/components/Homepage/AnimatedGIF.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const AnimatedGIF = ({ srcs, alts }) => {
+  return (
+    <div>
+      {srcs.map((src, index) => {
+        const isMP4 = src.endsWith('.mp4');
+        return isMP4 ? (
+          <video key={index} src={src} autoPlay loop muted />
+        ) : (
+          <img key={index} src={src} alt={alts[index]} className="w-102 h-80 rounded-lg" />
+        );
+      })}
+    </div>
+  );
+};
+
+export default AnimatedGIF;
diff --git a/src/components/Homepage/HeroSection.tsx b/src/components/Homepage/HeroSection.tsx
index c358016ed..96f4a9d25 100644
--- a/src/components/Homepage/HeroSection.tsx
+++ b/src/components/Homepage/HeroSection.tsx
@@ -1,8 +1,10 @@
 import React from "react";
-import Link from "@docusaurus/Link";
 import { FaGithub, FaArrowRight } from "react-icons/fa";
+import AnimatedGIF from "./AnimatedGIF";
+import mainGif from "./assets/main.gif";
 
-const HeroSection: React.FC = () => {
+
+const HeroSection = () => {
   return (
     <section className="relative bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center py-16 px-8">
       <div className="max-w-4xl text-center">
@@ -14,18 +16,22 @@ const HeroSection: React.FC = () => {
           understanding from the basics to advanced topics.
         </p>
         <div className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-6">
-          <Link
-            to="/docs"
-            className="flex items-center px-6 py-3 text-lg font-medium hover:text-white text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition duration-300 ease-in-out shadow-lg transform hover:scale-105"
+          <a
+            href="/docs"
+            className="flex items-center px-6 py-3 text-lg font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition duration-300 ease-in-out shadow-lg transform hover:scale-105"
           >
             Explore Algorithms <FaArrowRight className="ml-2" />
-          </Link>
-          <Link
-            to="https://github.com/ajay-dhangar/algo"
-            className="flex items-center px-6 py-3 text-lg font-medium text-[var(--ifm-color-primary)] border-2 border-blue-600 dark:border-white rounded-lg transition duration-300 ease-in-out hover:bg-blue-600 hover:text-white dark:hover:bg-white dark:hover:text-blue-600"
+          </a>
+          <a
+            href="https://github.com/ajay-dhangar/algo"
+            className="flex items-center px-6 py-3 text-lg font-medium text-blue-600 dark:text-white border-2 border-blue-600 dark:border-white rounded-lg transition duration-300 ease-in-out hover:bg-blue-600 hover:text-white dark:hover:bg-white dark:hover:text-blue-600"
           >
             View on GitHub <FaGithub className="ml-2" />
-          </Link>
+          </a>
+        </div>
+        <br />
+        <div className="mt-12">
+          <AnimatedGIF srcs={[mainGif]} alts={["Animated GIF"]} />
         </div>
       </div>
 
@@ -38,4 +44,4 @@ const HeroSection: React.FC = () => {
   );
 };
 
-export default HeroSection;
+export default HeroSection;
\ No newline at end of file
diff --git a/src/components/Homepage/assets/main.gif b/src/components/Homepage/assets/main.gif
new file mode 100644
index 000000000..e17485ebf
Binary files /dev/null and b/src/components/Homepage/assets/main.gif differ
diff --git a/src/components/Homepage/assets/main.mp4 b/src/components/Homepage/assets/main.mp4
new file mode 100644
index 000000000..2fe8021dd
Binary files /dev/null and b/src/components/Homepage/assets/main.mp4 differ