diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7ebaf43..9e258e1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,9 +19,11 @@
         "motion": "^12.23.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-icons": "^5.5.0",
         "react-intersection-observer": "^9.16.0",
         "react-router-dom": "^7.7.0",
         "shadcn": "^2.9.2",
+        "swiper": "^11.2.10",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.11"
       },
@@ -5187,6 +5189,15 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-intersection-observer": {
       "version": "9.16.0",
       "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
@@ -5843,6 +5854,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
+      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 81d2068..fe2ecc6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,9 +21,11 @@
     "motion": "^12.23.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^7.7.0",
     "shadcn": "^2.9.2",
+    "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"
   },
diff --git a/frontend/public/heroImg2.jpg b/frontend/public/heroImg2.jpg
new file mode 100644
index 0000000..db1669f
Binary files /dev/null and b/frontend/public/heroImg2.jpg differ
diff --git a/frontend/public/heroImg3.jpg b/frontend/public/heroImg3.jpg
new file mode 100644
index 0000000..42e3ce2
Binary files /dev/null and b/frontend/public/heroImg3.jpg differ
diff --git a/frontend/public/heroImg4.jpg b/frontend/public/heroImg4.jpg
new file mode 100644
index 0000000..9391662
Binary files /dev/null and b/frontend/public/heroImg4.jpg differ
diff --git a/frontend/public/heroImg5.jpg b/frontend/public/heroImg5.jpg
new file mode 100644
index 0000000..f5f196d
Binary files /dev/null and b/frontend/public/heroImg5.jpg differ
diff --git a/frontend/public/heroImg6.jpg b/frontend/public/heroImg6.jpg
new file mode 100644
index 0000000..9f1c72c
Binary files /dev/null and b/frontend/public/heroImg6.jpg differ
diff --git a/frontend/public/heroImg7.jpg b/frontend/public/heroImg7.jpg
new file mode 100644
index 0000000..f5fcf3a
Binary files /dev/null and b/frontend/public/heroImg7.jpg differ
diff --git a/frontend/src/Components/Hero.jsx b/frontend/src/Components/Hero.jsx
index 9b58c1e..9cfdd4d 100644
--- a/frontend/src/Components/Hero.jsx
+++ b/frontend/src/Components/Hero.jsx
@@ -1,24 +1,199 @@
 import { motion } from "framer-motion";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay, Pagination, Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+// import { motion } from 'framer-motion';
+
+const heroSlides = [
+  {
+    title: "Welcome to DevSync",
+    subtitle: "Your all-in-one productivity dashboard for developers 🚀",
+    bg: "#A4C7E6",
+    image: "https://www.sectorlink.com/img/blog/web-devel-important.jpg",
+  },
+  {
+    title: "Collaborate Effortlessly",
+    subtitle: "Real-time tools for teams to build, track, and ship faster.",
+    bg: "#F9C74F",
+    image: "https://www.sectorlink.com/img/blog/web-devel-important.jpg",
+  },
+  {
+    title: "Built for Developers",
+    subtitle: "Customizable widgets, theme support & integrations.",
+    bg: "#90BE6D",
+    image: "https://www.sectorlink.com/img/blog/web-devel-important.jpg",
+  },
+];
+
+const Component1 = () => (
+  <section className="w-full min-h-[80vh] bg-slate-800 rounded-md">
+    <div className="flex flex-col sm:flex-row mx-auto gap-0 sm:gap-10 justify-center sm:justify-around  items-center p-10 text-white ">
+      <div className="my-10 sm:mx-12 flex flex-col ">
+        <h2 className="font-bold text-3xl sm:text-5xl my-3 sm:my-10 font-mono capitalize">
+          Welcome to DevSync
+          <span className="inline-block w-5 h-5 mx-0 sm:mx-2 rounded-full bg-red-600 animate-pulse shadow-[0_0_13px_#ef4444]"></span>
+        </h2>
+        <p className="text-xl sm:text-2xl font-mono">
+          Your all-in-one productivity dashboard for developers 🚀
+        </p>
+
+        <button className="relative  bg-green-400 w-fit p-3 text-xl font-bold text-black rounded-lg hover:scale-105 transition-all duration-150 cursor-pointer my-3 sm:my-10 overflow-hidden group">
+          Get Started
+          <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 ease-in-out"></span>
+        </button>
+      </div>
+      <div>
+        {/* <img
+          className="w-2xl sm:w-3xl"
+          src="https://media.gettyimages.com/id/1640065952/vector/web-development-illustration.jpg?s=612x612&w=gi&k=20&c=Q7YK6n6Tj_MdrAayu9G113K-TnAYv_QlavLbqJgJe0s="
+        ></img> */}
+         <img
+          className="w-2xl sm:w-3xl"
+          src="/heroImg2.jpg"
+        ></img>
+
+      </div>
+    </div>
+  </section>
+);
+
+// const Component2 = () => (
+//   <section className="w-full min-h-[80vh] bg-[url(/heroImg3.jpg)] bg-cover bg-center rounded-md p-12 sm:py-10 ">
+//     <div className="flex flex-col sm:flex-row mx-auto gap-0 sm:gap-10 justify-end sm:justify-around  items-baseline p-3 sm:p-5 text-black border-2 w-fit  bg-white/10 backdrop-blur-sm">
+//       <div className="my-10 sm:mx-12 flex flex-col  ">
+//         <h2 className="font-bold text-3xl sm:text-5xl my-3 sm:my-10 font-mono capitalize">
+//           Collaborate Effortlessly
+//         </h2>
+//         <p className="text-xl font-bold sm:text-2xl font-mono">
+//           Real-time tools for teams to build, track, and ship faster.{" "}
+//         </p>
+
+//         <button className="relative block mx-auto bg-cyan-500 w-fit p-3 text-xl font-bold text-black rounded-lg hover:scale-105 transition-all duration-150 cursor-pointer my-3 sm:my-10 overflow-hidden group">
+//           Learn More
+//           <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 ease-in-out"></span>
+//         </button>
+//       </div>
+//       {/* <div>
+//         <img className="w-2xl sm:w-2xl" src="/heroImg2.jpg"></img> 
+//       </div> */}
+//     </div>
+//   </section>
+// );
+
+const Component2 = () => (
+  <section className="w-full min-h-[80vh] bg-slate-800 rounded-md">
+    <div className="flex flex-col-reverse sm:flex-row mx-auto gap-0 sm:gap-10 justify-center sm:justify-around  items-center p-10 text-white ">
+      <div>
+        <img
+          className="w-2xl sm:w-3xl border border-amber-500"
+          src="/heroImg7.jpg"
+        ></img>
+      </div>
+      <div className="my-10 sm:mx-12 flex flex-col ">
+        <h2 className="font-bold text-3xl sm:text-5xl my-3 sm:my-10 font-mono capitalize">
+          Collaborate Effortlessly
+          
+        </h2>
+        <p className="text-xl sm:text-2xl font-mono">
+          Real-time tools for teams to build, track, and ship faster.
+        </p>
+
+        <button className="relative bg-red-600  w-fit p-3 text-xl font-bold  rounded-lg hover:scale-105 transition-all duration-150 cursor-pointer my-5 sm:my-10 overflow-hidden group text-white">
+          Learn More
+          <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 ease-in-out"></span>
+          
+        </button>
+        
+      </div>
+      
+    </div>
+  </section>
+);
+
+
+
+
+const Component3 = () => (
+  <section className="w-full min-h-[80vh] bg-slate-800 rounded-md">
+    <div className="flex flex-col sm:flex-row mx-auto gap-0 sm:gap-10 justify-center sm:justify-around  items-center p-10 text-white ">
+      
+      <div className="my-10 sm:mx-12 flex flex-col ">
+        <h2 className="font-bold text-3xl sm:text-5xl my-3 sm:my-10 font-mono capitalize">
+          Built for Developers
+          
+        </h2>
+        <p className="text-xl sm:text-2xl font-mono">
+          Customizable widgets, theme support & integrations.
+        </p>
+
+        <button className="relative bg-purple-700  w-fit p-3 text-xl font-bold  rounded-lg hover:scale-105 transition-all duration-150 cursor-pointer my-5 sm:my-10 overflow-hidden group text-white">
+          Learn More
+          <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 ease-in-out"></span>
+          
+        </button>
+        
+      </div>
+      <div>
+        <img
+          className="w-2xl sm:w-3xl "
+          src="/heroImg4.jpg"
+        ></img>
+      </div>
+      
+    </div>
+  </section>
+);
+
+const slides = [<Component1 />, <Component2 />, <Component3 />];
 
 const Hero = () => {
   return (
-    <section id="home" className="w-full min-h-[80vh] bg-[#A4C7E6] px-6 flex justify-center items-center backdrop-blur-xl rounded-3xl border border-white/30 shadow-xl">
-  <motion.div
-    initial={{ opacity: 0, y: 40 }}
-    whileInView={{ opacity: 1, y: 0 }}
-    transition={{ duration: 0.8, ease: "easeOut" }}
-    viewport={{ once: true }}
-    className="w-full max-w-4xl p-10 text-center"
-  >
-    <h1 className="text-5xl md:text-6xl font-bold text-[#1D3557]">
-      Welcome to <span className="text-[#457B9D]">DevSync</span>
-    </h1>
-    <p className="mt-6 text-xl text-[#1D3557]/80">
-      Your all-in-one productivity dashboard for developers 🚀
-    </p>
-  </motion.div>
-</section>
-
+    <section className="w-full">
+      <Swiper
+        modules={[Autoplay, Pagination]}
+        slidesPerView={1}
+        loop={true}
+        autoplay={{ delay: 5000 }}
+        pagination={{ clickable: true }}
+        navigation={{
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        }}
+        
+      >
+        {slides.map((slide, index) => (
+          <SwiperSlide key={index}>
+            {/* <section
+              className={`w-full min-h-[80vh] px-6 py-16 flex justify-center items-center backdrop-blur-xl rounded-3xl border border-white/30 shadow-xl`}
+              
+            >
+              <motion.div
+                initial={{ opacity: 0, y: 40 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, ease: 'easeOut' }}
+                viewport={{ once: true }}
+                className="w-full max-w-4xl p-10 text-center"
+              >
+               
+                <h1 className="text-5xl md:text-6xl font-bold text-[#1D3557]">
+                  {slide.title}
+                </h1>
+                
+                
+                <p className="mt-6 text-xl text-[#1D3557]/80">{slide.subtitle}</p>
+                
+                 
+              </motion.div>
+            </section> */}
+            {slide}
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </section>
   );
 };