diff --git a/package-lock.json b/package-lock.json
index 6520371..f75cd9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,9 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-hook-form": "^7.54.2",
-        "tailwind-merge": "^2.5.5"
+        "swiper": "^11.1.15",
+        "tailwind-merge": "^2.5.5",
+        "zod": "^3.
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -5567,6 +5569,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
+      "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/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
diff --git a/package.json b/package.json
index 6b071e9..1ea426b 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,9 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
-    "tailwind-merge": "^2.5.5"
+    "swiper": "^11.1.15",
+    "tailwind-merge": "^2.5.5",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
new file mode 100644
index 0000000..b9fa91b
--- /dev/null
+++ b/src/components/Carousel/index.tsx
@@ -0,0 +1,43 @@
+// components/index.tsx
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Pagination, Navigation } from "swiper/modules";
+
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+const Carousel = () => {
+  const slides = [
+    { id: 1, content: "Slide 1", color: "bg-blue-500" },
+    { id: 2, content: "Slide 2", color: "bg-green-500" },
+    { id: 3, content: "Slide 3", color: "bg-purple-500" },
+  ];
+
+  return (
+    <div className="w-full max-w-7xl mx-auto lg:px-8">
+      <Swiper
+        spaceBetween={30}
+        pagination={{
+          clickable: true,
+        }}
+        navigation={true}
+        modules={[Pagination, Navigation]}
+        className="mySwiper"
+      >
+        {slides.map((slide) => (
+          <SwiperSlide key={slide.id}>
+            <div
+              className={`${slide.color} h-64 flex items-center justify-center text-white font-bold text-2xl sm:rounded-3xl shadow-md`}
+            >
+              {slide.content}
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default Carousel;
\ No newline at end of file