diff --git a/astro.config.mjs b/astro.config.mjs
index 04c3c82..cbe4b6e 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -19,7 +19,7 @@ export default defineConfig({
   },
 
   image: {
-    domains: ['placehold.co','ik.imagekit.io'],
+    domains: ['placehold.co','ik.imagekit.io','picsum.photos'],
     service: imageService(),
   },
 });
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0605b4a..8658eca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "astro": "^5.17.1",
         "astro-icon": "^1.1.5",
         "dayjs": "^1.11.19",
+        "swiper": "^12.1.0",
         "tailwindcss": "^4.1.18"
       },
       "devDependencies": {
@@ -5634,6 +5635,25 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/swiper": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.0.tgz",
+      "integrity": "sha512-BD4CpAOOyEvZ2f0CDx362ea+vmOwukVcmbsQx+0BhRIaBUz8wvcCd//E7RFmvBZCrfyqXCHUVqmgUwts6ywlxw==",
+      "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/tailwindcss": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
diff --git a/package.json b/package.json
index ba7ccd2..35a13ca 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "astro": "^5.17.1",
     "astro-icon": "^1.1.5",
     "dayjs": "^1.11.19",
+    "swiper": "^12.1.0",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
diff --git a/src/components/CarouselSection.astro b/src/components/CarouselSection.astro
new file mode 100644
index 0000000..31960e1
--- /dev/null
+++ b/src/components/CarouselSection.astro
@@ -0,0 +1,59 @@
+---
+import Image from "astro/components/Image.astro";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Icon } from "astro-icon/components";
+const { images } = Astro.props;
+---
+
+<div class="bg-white">
+  <div class="mx-auto">
+    <div class="swiper">
+      <div class="swiper-wrapper">
+        {
+          images.map((image) => (
+            <div class="swiper-slide">
+              <Image src={image} alt="" />
+            </div>
+          ))
+        }
+      </div>
+
+      <!-- If we need pagination -->
+      <div class="swiper-pagination"></div>
+
+      <!-- If we need navigation buttons -->
+      <div class="swiper-button-prev">
+        <Icon name="ph:arrow-circle-left-thin" class="text-white" />
+      </div>
+      <div class="swiper-button-next">
+        <Icon name="ph:arrow-circle-right-thin" class="text-white" />
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import Swiper from "swiper";
+  const swiper = new Swiper(".swiper", {
+    // Optional parameters
+    loop: true,
+
+    // If we need pagination
+    pagination: {
+      el: ".swiper-pagination",
+    },
+
+    // Navigation arrows
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+
+    // And if we need scrollbar
+    scrollbar: {
+      el: ".swiper-scrollbar",
+    },
+  });
+</script>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 4c36cf0..d334eca 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,26 +3,24 @@ import Button from "./ui/Button.astro";
 ---
 
 <div>
-    <div class="flex justify-between py-4">
-        <div class="border-l-4 border-primary pl-4">
-            <p
-                class="font-secondary text-primary font-bold leading-none py-2 text-md"
-            >
-                Centro del Reino<br /> De Paz y Justicia
-            </p>
-        </div>
-        <nav
-            class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
-        >
-            <div class="flex gap-8">
-                <a href="#">Inicio</a>
-                <a href="#">Somos</a>
-                <a href="#">Programas</a>
-                <a href="#">Noticias</a>
-            </div>
-            <div class="w-50">
-                <Button title="Contacto" url="/contacto" variant="primary" />
-            </div>
-        </nav>
+  <div class="flex justify-between py-4">
+    <div class="border-l-4 border-primary pl-4">
+      <p class="font-secondary text-primary font-bold leading-none py-2 text-md">
+        Centro del Reino<br /> De Paz y Justicia
+      </p>
     </div>
+    <nav
+      class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
+    >
+      <div class="flex gap-8">
+        <a href="#">Inicio</a>
+        <a href="#">Somos</a>
+        <a href="#">Programas</a>
+        <a href="#">Noticias</a>
+      </div>
+      <div class="w-50">
+        <Button title="Contacto" url="/contacto" variant="primary" />
+      </div>
+    </nav>
+  </div>
 </div>
diff --git a/src/components/HeroHome.astro b/src/components/HeroHome.astro
index 9503b61..3ab9fee 100644
--- a/src/components/HeroHome.astro
+++ b/src/components/HeroHome.astro
@@ -3,7 +3,9 @@ import HeroImage from '../assets/hero-image.webp';
 ---
 
 <div class="h-screen p-5">
+    <div class="container mx-auto">
     <div class="absolute">
         <img src={HeroImage} alt="Hero Image" class="w-full h-screen object-cover" />
     </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/components/NewsCard.astro b/src/components/NewsCard.astro
index 17b1c78..3e4705b 100644
--- a/src/components/NewsCard.astro
+++ b/src/components/NewsCard.astro
@@ -1,19 +1,24 @@
 ---
 import Image from "astro/components/Image.astro";
-import { Icon } from 'astro-icon/components'
+import { Icon } from "astro-icon/components";
 import dayjs from "dayjs";
 
 const { data } = Astro.props;
-const nicedate = dayjs(data.date).format('D MMMM YYYY')
+const nicedate = dayjs(data.date).format("D MMMM YYYY");
 ---
+
 <div class="bg-[#EBE5D0] p-10">
-    <Icon name="ph:arrow-circle-down-thin" class="text-8xl mb-8" />
-    <p class="font-light text-2xl mb-8">{data.city}, {data.country}<br/>({nicedate}):</p>
-    <h3 class="text-2xl font-bold mb-8">{data.title}</h3>
+  <Icon name="ph:arrow-circle-down-thin" class="text-8xl mb-8" />
+  <p class="font-light text-2xl mb-8">
+    {data.city}, {data.country}<br />({nicedate}):
+  </p>
+  <h3 class="text-2xl font-bold mb-8">{data.title}</h3>
 
-    
-
-    <div>
-        <Image src={data.thumbnail} alt={data.title} class="aspect-square object-cover" />
-    </div>
-</div>
\ No newline at end of file
+  <div>
+    <Image
+      src={data.thumbnail}
+      alt={data.title}
+      class="aspect-square object-cover"
+    />
+  </div>
+</div>
diff --git a/src/components/NewsSection.astro b/src/components/NewsSection.astro
index 6b89bba..9d3a574 100644
--- a/src/components/NewsSection.astro
+++ b/src/components/NewsSection.astro
@@ -5,6 +5,7 @@ import NewsCard from "./NewsCard.astro";
 const newsItems = await getCollection("news");
 ---
 <div id="news" class="bg-[#22523F] py-20">
+    <div class="container mx-auto">
     <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Noticias</h4>
     <h2 class="text-white text-6xl font-bold text-center font-secondary mb-4">Actualidad institucional y proyección internacional</h2>
 
@@ -15,4 +16,5 @@ const newsItems = await getCollection("news");
 		))
 	}
     </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/components/ParticipateSection.astro b/src/components/ParticipateSection.astro
index ef8edf6..7614012 100644
--- a/src/components/ParticipateSection.astro
+++ b/src/components/ParticipateSection.astro
@@ -1,6 +1,7 @@
 ---
 ---
 <div class="bg-[#CBA16A] py-20">
+    <div class="container mx-auto">
     <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Participa | Colabora</h4>
     <h2 class="text-white text-6xl font-bold text-center font-secondary mb-4">Sumarse es asumir un compromiso con propósito</h2>
 
@@ -24,4 +25,5 @@
     </div>
 
     <p>La paz se construye mediante decisiones responsables, liderazgo comprometido y acción sostenida.</p>
+</div>
 </div>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 699d464..44175d0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,18 +5,21 @@ import MainLayout from "../layouts/MainLayout.astro";
 import HeroHome from "../components/HeroHome.astro";
 import NewsSection from "../components/NewsSection.astro";
 import ParticipateSection from "../components/ParticipateSection.astro";
+import CarouselSection from "../components/CarouselSection.astro";
+
+const carouselImages2 = [
+  "https://picsum.photos/1920/800?random=1&grayscale",
+  "https://picsum.photos/1920/800?random=2&grayscale",
+  "https://picsum.photos/1920/800?random=3&grayscale",
+];
 ---
 
 <MainLayout>
-	<div class="max-w-480 mx-auto px-29">
-		<HeroHome />
-	</div>
-	
-	<div class="max-w-480 mx-auto px-29">
-		<NewsSection />
-	</div>
+  <HeroHome />
 
-	<div class="max-w-480 bg-[#CBA16A] px-29">
-		<ParticipateSection />
-	</div>
+  <CarouselSection images={carouselImages2} />
+
+  <NewsSection />
+
+  <ParticipateSection />
 </MainLayout>