diff --git a/package.json b/package.json
index b7339c8..420b5a5 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,12 @@
     "@alpinejs/intersect": "3.13.10",
     "@alpinejs/persist": "3.13.10",
     "@astrojs/tailwind": "5.1.0",
-    "iconify-icon": "^2.0.0",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/typography": "0.5.12",
     "alpinejs": "3.13.10",
     "astro": "4.7.0",
-    "swiper": "11.1.1",
+    "astro-swiper": "^1.4.0",
+    "iconify-icon": "^2.0.0",
     "tailwindcss": "3.4.3"
   },
   "devDependencies": {
diff --git a/src/components/content/Testimonials.astro b/src/components/content/Testimonials.astro
index 0b8d5f7..2fecca2 100644
--- a/src/components/content/Testimonials.astro
+++ b/src/components/content/Testimonials.astro
@@ -1,23 +1,58 @@
 ---
 import Polka from "@components/base/Polka.astro";
 import Card from "@components/base/Card.astro";
+
+import {
+  Swiper,
+  SwiperSlide,
+  SwiperWrapper,
+} from "astro-swiper";
+import type { SwiperOptions } from "swiper/types";
+
+const swiperOptions: SwiperOptions = {
+  loop: true,
+  autoplay: {
+    delay: 5000,
+  },
+  slidesPerView: 4,
+  spaceBetween: 20,
+  breakpoints: {
+    340: {
+      slidesPerView: 1,
+      spaceBetween: 20,
+    },
+    768: {
+      slidesPerView: 3,
+      spaceBetween: 20,
+    },
+    1024: {
+      slidesPerView: 4,
+      spaceBetween: 20,
+    },
+  },
+  navigation: {
+    nextEl: "testimonial-slider-next",
+    prevEl: "testimonial-slider-prev",
+  },
+};
+
 ---
 
 <div x-cloak class="relative overflow-hidden" x-intersect="activeStep = ''">
-  <div x-data="swiper()" class="carousel-container">
+  <div class="carousel-container">
     <div class="carousel-controls flex items-center justify-end mb-4">
-      <button class="w-10 h-10 flex items-center justify-center rounded-xl text-muted-600 hover:text-primary-600 dark:text-muted-300 dark:hover:text-muted-100 hover:bg-muted-200 dark:hover:bg-muted-900 transition-colors duration-300" @click="swiper.slidePrev()">
+      <button id="testimonial-slider-prev" class="w-10 h-10 flex items-center justify-center rounded-xl text-muted-600 hover:text-primary-600 dark:text-muted-300 dark:hover:text-muted-100 hover:bg-muted-200 dark:hover:bg-muted-900 transition-colors duration-300">
         <iconify-icon class="iconify" icon="lucide:arrow-left"></iconify-icon>
       </button>
 
-      <button class="w-10 h-10 flex items-center justify-center rounded-xl text-muted-600 hover:text-primary-600 dark:text-muted-300 dark:hover:text-muted-100 hover:bg-muted-200 dark:hover:bg-muted-900 transition-colors duration-300" @click="swiper.slideNext()">
+      <button id="testimonial-slider-next" class="w-10 h-10 flex items-center justify-center rounded-xl text-muted-600 hover:text-primary-600 dark:text-muted-300 dark:hover:text-muted-100 hover:bg-muted-200 dark:hover:bg-muted-900 transition-colors duration-300">
         <iconify-icon class="iconify" icon="lucide:arrow-right"></iconify-icon>
       </button>
     </div>
-    <div class="swiper-container" x-ref="container">
-      <div class="swiper-wrapper">
+    <Swiper options={swiperOptions} class="swiper-container" x-ref="container">
+      <SwiperWrapper>
         <!-- Slides -->
-        <div class="swiper-slide">
+        <SwiperSlide>
           <Card class="'p-6'">
             <div class="w-full flex flex-col gap-8 font-sans">
               <iconify-icon class="iconify w-8 h-8 flex items-center justify-center text-3xl text-primary-600 dark:text-rose-500" icon="fa6-solid:quote-left"></iconify-icon>
@@ -43,9 +78,9 @@ import Card from "@components/base/Card.astro";
               </div>
             </div>
           </Card>
-        </div>
+        </SwiperSlide>
         <!-- Slides -->
-        <div class="swiper-slide">
+        <SwiperSlide>
           <Card class="'p-6'">
             <div class="w-full flex flex-col gap-8 font-sans">
               <iconify-icon class="iconify w-8 h-8 flex items-center justify-center text-3xl text-primary-600 dark:text-rose-500" icon="fa6-solid:quote-left"></iconify-icon>
@@ -71,9 +106,9 @@ import Card from "@components/base/Card.astro";
               </div>
             </div>
           </Card>
-        </div>
+        </SwiperSlide>
         <!-- Slides -->
-        <div class="swiper-slide">
+        <SwiperSlide>
           <Card class="'p-6'">
             <div class="w-full flex flex-col gap-8 font-sans">
               <iconify-icon class="iconify w-8 h-8 flex items-center justify-center text-3xl text-primary-600 dark:text-rose-500" icon="fa6-solid:quote-left"></iconify-icon>
@@ -99,9 +134,9 @@ import Card from "@components/base/Card.astro";
               </div>
             </div>
           </Card>
-        </div>
+        </SwiperSlide>
         <!-- Slides -->
-        <div class="swiper-slide">
+        <SwiperSlide>
           <Card class="'p-6'">
             <div class="w-full flex flex-col gap-8 font-sans">
               <iconify-icon class="iconify w-8 h-8 flex items-center justify-center text-3xl text-primary-600 dark:text-rose-500" icon="fa6-solid:quote-left"></iconify-icon>
@@ -127,9 +162,9 @@ import Card from "@components/base/Card.astro";
               </div>
             </div>
           </Card>
-        </div>
+        </SwiperSlide>
         <!-- Slides -->
-        <div class="swiper-slide">
+        <SwiperSlide>
           <Card class="'p-6'">
             <div class="w-full flex flex-col gap-8 font-sans">
               <iconify-icon class="iconify w-8 h-8 flex items-center justify-center text-3xl text-primary-600 dark:text-rose-500" icon="fa6-solid:quote-left"></iconify-icon>
@@ -155,8 +190,8 @@ import Card from "@components/base/Card.astro";
               </div>
             </div>
           </Card>
-        </div>
-        <div class="swiper-slide">
+        </SwiperSlide>
+        <SwiperSlide>
           <Card class="'p-6'">
             <div class="w-full flex flex-col gap-8 font-sans">
               <iconify-icon class="iconify w-8 h-8 flex items-center justify-center text-3xl text-primary-600 dark:text-rose-500" icon="fa6-solid:quote-left"></iconify-icon>
@@ -182,8 +217,8 @@ import Card from "@components/base/Card.astro";
               </div>
             </div>
           </Card>
-        </div>
-      </div>
-    </div>
+        </SwiperSlide>
+      </SwiperWrapper>
+    </Swiper>
   </div>
 </div>
diff --git a/src/js/components/index.js b/src/js/components/index.js
index 8e1f38b..9ddcfc3 100644
--- a/src/js/components/index.js
+++ b/src/js/components/index.js
@@ -1,7 +1,5 @@
 import { theme } from "./theme";
 import { navbar } from "./navbar";
-import { swiper } from "./swiper";
 
 window.theme = theme;
-window.navbar = navbar
-window.swiper = swiper
\ No newline at end of file
+window.navbar = navbar
\ No newline at end of file
diff --git a/src/js/components/swiper.js b/src/js/components/swiper.js
deleted file mode 100644
index d90610c..0000000
--- a/src/js/components/swiper.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Swiper from "swiper";
-
-export function swiper() {
-  return {
-    swiper: null,
-    init() {
-      this.swiper = new Swiper(this.$refs.container, {
-        loop: true,
-        autoplay: {
-          delay: 5000,
-        },
-        slidesPerView: 4,
-        spaceBetween: 20,
-        pagination: {
-          el: ".carousel-pagination",
-          type: "bullets",
-        },
-        breakpoints: {
-          340: {
-            slidesPerView: 1,
-            spaceBetween: 20,
-          },
-          768: {
-            slidesPerView: 3,
-            spaceBetween: 20,
-          },
-          1024: {
-            slidesPerView: 4,
-            spaceBetween: 20,
-          },
-        },
-      });
-    },
-  };
-}
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index d897ff5..d5a4e84 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -3,7 +3,6 @@ import { ViewTransitions } from 'astro:transitions';
 import Navbar from "@components/navigation/Navbar.astro";
 import Footer from "@components/section/Footer.astro";
 import '@fontsource-variable/inter';
-import 'swiper/swiper-bundle.css';
 import "../styles/main.css";
 const { title } = Astro.props;
 ---