diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/public/imgs/17Objetivos.png b/public/imgs/17Objetivos.png
new file mode 100644
index 0000000..fee7726
Binary files /dev/null and b/public/imgs/17Objetivos.png differ
diff --git a/public/imgs/imgimp1.jpg b/public/imgs/imgimp1.jpg
new file mode 100644
index 0000000..b73f5c2
Binary files /dev/null and b/public/imgs/imgimp1.jpg differ
diff --git a/public/imgs/imgimp2.jpg b/public/imgs/imgimp2.jpg
new file mode 100644
index 0000000..8c40273
Binary files /dev/null and b/public/imgs/imgimp2.jpg differ
diff --git a/public/imgs/imgimp3.jpg b/public/imgs/imgimp3.jpg
new file mode 100644
index 0000000..8e9e075
Binary files /dev/null and b/public/imgs/imgimp3.jpg differ
diff --git a/public/imgs/imgimp4.jpg b/public/imgs/imgimp4.jpg
new file mode 100644
index 0000000..77aac39
Binary files /dev/null and b/public/imgs/imgimp4.jpg differ
diff --git a/public/imgs/imgimp5.jpg b/public/imgs/imgimp5.jpg
new file mode 100644
index 0000000..9506650
Binary files /dev/null and b/public/imgs/imgimp5.jpg differ
diff --git a/public/imgs/imgimp6.jpg b/public/imgs/imgimp6.jpg
new file mode 100644
index 0000000..6949a5a
Binary files /dev/null and b/public/imgs/imgimp6.jpg differ
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ff683ed..91e5e70 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -81,9 +81,9 @@ const animateOnScroll = `
 						</div>
 						<div class="col-md-6 animate-on-scroll">
 							<div
-								class="bg-secondary text-white p-5 text-center"
+								class=" text-white p-5 text-center"
 							>
-								<p>Aquí iría una imagen de los 17 ODS</p>
+								<img src="../../public/imgs/17Objetivos.png" alt="" class="img-thumbnail .img-fluid">
 							</div>
 						</div>
 					</div>
@@ -156,15 +156,20 @@ const animateOnScroll = `
 					</h2>
 					<div class="row g-4">
 						{
-							[1, 2, 3, 4, 5, 6].map((num) => (
-								<div class="col-md-4 animate-on-scroll">
-									<div class="bg-light p-4 text-center">
-										<p>Imagen de impacto {num}</p>
-									</div>
-								</div>
-							))
+						  [1, 2, 3, 4, 5, 6].map((num) => (
+							<div class="col-md-4 animate-on-scroll">
+							  <div class="bg-light p-4 text-center">
+								<img 
+								  src={`../../public/imgs/imgimp${num}.jpg`} 
+								  alt={`Imagen de impacto ${num}`} 
+								  class="img-fluid img-fit" 
+								/>
+
+							  </div>
+							</div>
+						  ))
 						}
-					</div>
+					  </div>
 				</div>
 			</section>
 
@@ -294,4 +299,12 @@ const animateOnScroll = `
 		height: 40px;
 		margin-right: 10px;
 	}
+
+	.img-fit{
+		width: 100%;
+		height: 200px;
+		object-fit: cover;
+		border-radius: 8px;
+	}
+
 </style>