diff --git a/src/pages/index.astro b/src/pages/index.astro
index e5df8bf..91edcfb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,6 +9,7 @@ import Map from "../assets/mapa.png";
 import LogoAirbnb from "../assets/logo-airbnb.svg";
 import LogoBooking from "../assets/logo-booking.svg";
 const optimizedBackgroundImage = await getImage({ src: HeroImage });
+const logoImage = await getImage({ src: Logo });
 
 const reviews = [
 	{
@@ -54,16 +55,17 @@ const reviews = [
 	</head>
 	<body class="m-0 text-night bg-seasalt font-montserrat">
 		<nav
-			class="flex justify-between sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0"
+			class="flex justify-center sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0"
 		>
-			<Image
-				src={Logo}
-				alt="TODO"
-				class="h-12 w-auto"
+			<Image src={Logo} alt="TODO" class="sr-only" />
+			<div
+				class="h-12 sm:h-20 w-[8.4rem] sm:w-56 bg-seasalt sm:bg-sunglow"
 				style={{
-					filter: "invert(88%) sepia(96%) saturate(5079%) hue-rotate(185deg) brightness(125%) contrast(96%)",
+					maskImage: `url(${logoImage.src})`,
+					maskSize: "cover",
 				}}
-			/>
+			>
+			</div>
 
 			<!-- <button class="text-seasalt">MENU</button> -->
 		</nav>
