diff --git a/src/components/Header.astro b/src/components/Header.astro
index 796a3e1..23e0c93 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -17,7 +17,31 @@ import Button from "./ui/Button.astro";
         <a class="hover:text-colorPrimary transition" href="#programs">Programas</a>
         <a class="hover:text-colorPrimary transition" href="#news">Noticias</a>
       </div>
-      <div class="w-50">
+      <div class="drawer lg:hidden">
+        <input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
+        <div class="drawer-content">
+          <!-- Page content here -->
+          <label for="my-drawer-1" class="btn drawer-button">Open drawer</label>
+        </div>
+        <div class="drawer-side">
+          <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
+          <ul class="menu min-h-full w-80 p-4 bg-[#22523F] text-white">
+            <!-- Sidebar content here -->
+              <p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-xl ">
+                <a href="/">Centro del Reino<br /> De Paz y Justicia</a>
+              </p>
+              <div class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
+                <li><a><a class="hover:text-colorPrimary transition" href="#somos">Somos</a></a></li>
+                <li><a><a class="hover:text-colorPrimary transition" href="#programs">Programas</a></a></li>
+                <li><a><a class="hover:text-colorPrimary transition" href="#news">Noticias</a></a></li>
+              </div>
+            <div class="w-50">
+              <Button class="px-8 py-2 uppercase text-lg mt-8" title="Contacto" url="#contact" variant="primary" />
+            </div>
+          </ul>
+        </div>
+      </div>
+      <div class="w-50 hidden md:block">
         <Button class="px-8 py-2 uppercase" title="Contacto" url="#contact" variant="primary" />
       </div>
     </nav>
diff --git a/src/components/section/CarouselSection.astro b/src/components/section/CarouselSection.astro
index ea1d433..cad35e5 100644
--- a/src/components/section/CarouselSection.astro
+++ b/src/components/section/CarouselSection.astro
@@ -42,24 +42,23 @@ const { images } = Astro.props;
 
 <script>
   import Swiper from "swiper";
-  const swiper = new Swiper(".swiper", {
-    // Optional parameters
-    loop: true,
+  import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
+  
+const swiper = new Swiper('.swiper', {
+  modules: [Navigation, Pagination, Scrollbar],
+  loop: true,
 
-    // If we need pagination
-    pagination: {
-      el: ".swiper-pagination",
-    },
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
 
-    // Navigation arrows
-    navigation: {
-      nextEl: ".swiper-button-next",
-      prevEl: ".swiper-button-prev",
-    },
+  pagination: {
+    el: '.swiper-pagination',
+  },
 
-    // And if we need scrollbar
-    scrollbar: {
-      el: ".swiper-scrollbar",
-    },
-  });
+  scrollbar: {
+    el: '.swiper-scrollbar',
+  },
+});
 </script>