diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 09526c0..ae09d4c 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,11 @@
 ---
 const date = new Date();
+import { Image } from 'astro:assets';
+import linkedIn from 'bootstrap-icons/icons/linkedin.svg'
+import facebook from 'bootstrap-icons/icons/facebook.svg'
+import instagram from 'bootstrap-icons/icons/instagram.svg'
+import youtube from 'bootstrap-icons/icons/youtube.svg'
+import github from 'bootstrap-icons/icons/github.svg'
 ---
 <footer>
     <div class="container pb-5">
@@ -11,31 +17,37 @@ const date = new Date();
           <ul class="list-inline mb-0">
             <li class="list-inline-item">
               <a href="https://www.linkedin.com/company/codyopslatam">
-                <i class="bi-linkedin text-white"></i>
+                <Image class="img-bg-w" src={linkedIn} width={25} alt={'linkedIn Logo'}></Image>
               </a>
             </li>
             <li class="list-inline-item">
               <a href="https://www.facebook.com/codyopslatam">
-                <i class="bi-facebook text-white"></i>
+                <Image class="img-bg-w" src={facebook} width={25} alt={'facebook Logo'}></Image>
               </a>
             </li>            
             <li class="list-inline-item">
               <a href="https://www.instagram.com/codyopslatam">
-                <i class="bi-instagram text-white"></i>
+                <Image class="img-bg-w" src={instagram} width={25} alt={'instagram Logo'}></Image>
               </a>
             </li>
             <li class="list-inline-item">
               <a href="https://www.youtube.com/@codyopslabs">
-                <i class="bi-youtube text-white"></i>
+                <Image class="img-bg-w" src={youtube} width={25} alt={'youtube Logo'}></Image>
               </a>
             </li>
             <li class="list-inline-item">
               <a href="https://github.com/codyopslabs">
-                <i class="bi-github text-white"></i>
+                <Image class="img-bg-w" src={github} width={25} alt={'github Logo'}></Image>
               </a>
             </li>
           </ul>
         </div>
       </div>
     </div>
-</footer>
\ No newline at end of file
+</footer>
+
+<style>
+  .img-bg-w {
+      filter: invert(100%) brightness(100%);
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e5d7c59..7cb28dd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -31,7 +31,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://ar.codyops.com/ ">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={argentina} alt="Argentina Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={argentina} alt="Argentina Logo" />
 						</div>
 						<h2 class="card-title text-white">Argentina</h2>
 				</a>
@@ -39,7 +39,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://www.codyops.com.br">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={brazil} alt="Brasil Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={brazil} alt="Brasil Logo" />
 						</div>
 						<h2 class="card-title text-white">Brasil</h2>
 				</a>
@@ -47,7 +47,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://cl.codyops.com">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={chile} alt="Chile Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={chile} alt="Chile Logo" />
 						</div>
 						<h2 class="card-title text-white">Chile</h2>
 				</a>
@@ -57,7 +57,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://co.codyops.com">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={colombia} alt="Colombia Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={colombia} alt="Colombia Logo" />
 						</div>
 						<h2 class="card-title text-white">Colombia</h2>
 				</a>
@@ -65,7 +65,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://cr.codyops.com/ ">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={costarica} alt="Costa Rica Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={costarica} alt="Costa Rica Logo" />
 						</div>
 						<h2 class="card-title text-white">Costa Rica</h2>
 				</a>
@@ -73,7 +73,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://do.codyops.com">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={dominicana} alt="Dominicana Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={dominicana} alt="Dominicana Logo" />
 						</div>
 						<h2 class="card-title text-white">Dominicana</h2>
 				</a>
@@ -83,7 +83,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://ec.codyops.com">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={ecuador} alt="Ecuador Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={ecuador} alt="Ecuador Logo" />
 						</div>
 						<h2 class="card-title text-white">Ecuador</h2>
 				</a>
@@ -91,7 +91,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://www.codyops.com.es">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={spain} alt="Spain Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={spain} alt="Spain Logo" />
 						</div>
 						<h2 class="card-title text-white">España</h2>
 				</a>
@@ -99,7 +99,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://www.codyops.com ">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={usa} alt="USA Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={usa} alt="USA Logo" />
 						</div>
 						<h2 class="card-title text-white">Estados Unidos</h2>
 				</a>
@@ -109,7 +109,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://mx.codyops.com/ ">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={mexico} alt="Mexico Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={mexico} alt="Mexico Logo" />
 						</div>
 						<h2 class="card-title text-white">México</h2>
 				</a>
@@ -117,7 +117,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://pa.codyops.com">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={panama} alt="Panama Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={panama} alt="Panama Logo" />
 						</div>
 						<h2 class="card-title text-white">Panamá</h2>
 				</a>
@@ -125,7 +125,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4">
 				<a class="text-center text-decoration-none border-0" href="https://py.codyops.com">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={paraguay} alt="Paraguay Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={paraguay} alt="Paraguay Logo" />
 						</div>
 						<h2 class="card-title text-white">Paraguay</h2>
 				</a>
@@ -135,7 +135,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://pe.codyops.com/ ">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={peru} alt="Peru Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={peru} alt="Peru Logo" />
 						</div>
 						<h2 class="card-title text-white">Perú</h2>
 				</a>
@@ -143,7 +143,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
 				<a class="text-center text-decoration-none border-0" href="https://sv.codyops.com">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={salvador} alt="Salvador Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={salvador} alt="Salvador Logo" />
 						</div>
 						<h2 class="card-title text-white">El Salvador</h2>
 				</a>
@@ -151,7 +151,7 @@ import spain from '../assets/img/spain-flag-square-medium.png';
 			<div class="col-md-6 col-lg-4">
 				<a class="text-center text-decoration-none border-0" href="https://uy.codyops.com">
 						<div class="mb-3">
-							<Picture class="img-thumbnail" src={uruguay} alt="Uruguay Logo" />
+							<Picture class="img-thumbnail" width="300" height="300" loading="eager" src={uruguay} alt="Uruguay Logo" />
 						</div>
 						<h2 class="card-title text-white">Uruguay</h2>
 				</a>