diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index fec3582..9f2759d 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -3,43 +3,37 @@
 		class="Footer flex w-full h-full container justify-between gap-5 items-center flex-col md:flex-row"
 	>
 		<img
-			class="Image1 mix-blend-screen"
 			src="/img/logo-cmx-blanco.svg"
 			style="height: 44px;"
 			alt="Codeando México"
 		/>
-		<div class="Frame30 flex-col justify-start items-center gap-4 inline-flex">
-			<div class="HechoConPorLaComunidad text-neutral-50 text-sm font-normal leading-[21px]">
-				Hecho con ❤️ por la comunidad
-			</div>
-		</div>
-		<div class="Frame7 flex-col justify-center items-start gap-2 inline-flex">
-			<div class="Frame31 self-stretch justify-center items-center gap-4 inline-flex">
-				<div
-					class="Frame8 p-2 bg-neutral-50 rounded-[45px] flex-col justify-start items-start gap-px inline-flex"
+
+		<p class="text-neutral-50 text-sm">
+			Hecho con ❤️ por la comunidad
+		</p>
+
+		<div class="text-center">
+			<div class="flex justify-center items-center gap-4">
+				<a href="https://x.com/CodeandoMexico/" target="_blank" rel="noopener noreferrer"
+					class="rounded-full bg-neutral-50 p-2 transition ease-in duration-150 hover:bg-cmxgreen focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen focus:bg-cmxgreen"
 				>
-					<a href="https://x.com/CodeandoMexico/" target="_blank" rel="noopener noreferrer"
-						><img src="/x.svg" alt="X (twitter)" srcset="" /></a
-					>
-				</div>
-				<div
-					class="Frame9 p-2 bg-neutral-50 rounded-[45px] flex-col justify-start items-start gap-px inline-flex"
+					<img src="/x.svg" alt="X (twitter)" srcset="" />
+				</a>
+				<a href="https://github.com/CodeandoMexico/" target="_blank" rel="noopener noreferrer"
+					class="rounded-full bg-neutral-50 p-2 transition ease-in duration-150 hover:bg-cmxgreen focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen focus:bg-cmxgreen"
 				>
-					<a href="https://github.com/CodeandoMexico/" target="_blank" rel="noopener noreferrer"
-						><img src="/github.svg" alt="Github" srcset="" /></a
-					>
-				</div>
-				<div
-					class="Frame10 p-2 bg-neutral-50 rounded-[45px] flex-col justify-start items-start gap-px inline-flex"
+					<img src="/github.svg" alt="Github" srcset="" />
+				</a>
+			
+				<a href="https://codeandomexico.slack.com/" target="_blank" rel="noopener noreferrer"
+					class="rounded-full bg-neutral-50 p-2 transition ease-in duration-150 hover:bg-cmxgreen focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen focus:bg-cmxgreen"
 				>
-					<a href="https://codeandomexico.slack.com/" target="_blank" rel="noopener noreferrer"
-						><img src="/slack.svg" alt="Slack" srcset="" /></a
-					>
-				</div>
+					<img src="/slack.svg" alt="Slack" srcset="" />
+				</a>
 			</div>
-			<div class="HolaCodeandomexicoOrg text-neutral-50 text-sm font-normal leading-[21px]">
+			<p class="text-neutral-50 text-sm mt-2">
 				equipo@codeandomexico.org
-			</div>
+			</p>
 		</div>
 	</div>
 </footer>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
new file mode 100644
index 0000000..f333ea4
--- /dev/null
+++ b/src/components/Header.svelte
@@ -0,0 +1,7 @@
+<header>
+	<a 
+		href="#main"
+		class="sr-only font-semibold uppercase focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-cmxblack focus:text-white focus:px-10 focus:py-5 focus:rounded focus:shadow-lg focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-white">
+		Ir a contenido principal
+	</a>
+</header>
diff --git a/src/components/Hero.svelte b/src/components/Hero.svelte
index 14d86e7..033c0e3 100644
--- a/src/components/Hero.svelte
+++ b/src/components/Hero.svelte
@@ -28,7 +28,11 @@
 	<div class="container px-5 py-28">
 		<div class="flex-col-reverse md:flex-row flex items-center gap-10 columns-2">
 			<div class="md:w-1/2 md:p-5">
-				<h1 class="text-6xl font-bold text-white leading-tight">{title}</h1>
+				<h1 
+					class="text-6xl font-bold text-white leading-tight box-decoration-clone px-3 inline rounded-sm bg-cmxnuanced" 
+				>
+					{title}
+				</h1>
 				<p 
 					class="md:py-6 text-2xl leading-normal" 
 					style:color={contrastedColor}
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index 2cbf10d..8514e24 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -1,13 +1,23 @@
-<script>
+<script lang="ts">
 	import { principalMenuStore } from '@/store';
 
+	let isMenuOpen = false;
+
 	function closeHambMenu() {
 		document.getElementById('hamburger-menu')?.classList.toggle('hidden');
+		isMenuOpen = false;
 	}
 	function openHambMenu() {
 		document.getElementById('hamburger-menu')?.classList.toggle('hidden');
+		isMenuOpen = true;
 	}
 
+	function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && isMenuOpen) {
+      closeHambMenu()
+    }
+  }
+
 	let menuItems = [
 		{ name: 'Proyectos', url: '/proyectos' },
 		{ name: 'Blog', url: '/blog' },
@@ -17,21 +27,23 @@
 	];
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
+
 <nav class="absolute w-full py-5 max-lg:bg-white">
 	<div class="flex container m-auto items-center px-5">
-		<a href="/">
-			<span class="sr-only">Codeando México</span>
+		<a href="/" class="rounded-sm transition ease-in duration-150 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxnuanced">
+			<span class="sr-only">Inicio</span>
 			<img src="/img/logo-cmx.svg" style="height: 44px;" alt="Codeando México" />
 		</a>
 		<div class="flex-grow"></div>
 
-		<ul class="gap-5 hidden lg:flex">
+		<ul class="gap-2 hidden lg:flex">
 			{#each menuItems as item}
 				<li>
 					<a
-						class={`hover:underline hover:gray-800 uppercase font-bold ${
-							$principalMenuStore.urlActive.includes(item.url) ? $principalMenuStore.color : ''
-						}`.trim()}
+						class={`p-2 rounded-sm transition ease-in duration-150 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxnuanced hover:underline hover:gray-800 uppercase font-bold 
+						${$principalMenuStore.urlActive.includes(item.url) ? $principalMenuStore.color : ''}
+						${$principalMenuStore.urlActive.includes(item.url) ? $principalMenuStore.background : ''}`.trim()}
 						href={item.url}
 					>
 						{item.name}
@@ -40,70 +52,56 @@
 			{/each}
 		</ul>
 
-		<button
-			type="button"
-			class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 lg:hidden"
-			onclick={openHambMenu}
-		>
-			<span class="sr-only">Open main menu</span>
-			<svg
-				class="h-6 w-6"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				aria-hidden="true"
+		{#if !isMenuOpen}
+			<button
+				aria-label="Abrir menú principal"
+				type="button"
+				onclick={openHambMenu}
+				class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 lg:hidden hover:bg-gray-100 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen"
 			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-				></path>
-			</svg>
-		</button>
+				<svg aria-hidden="true" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
+				</svg>
+			</button>
+		{/if}
 	</div>
 </nav>
 <div id="hamburger-menu" class="lg:hidden hidden" role="dialog" aria-modal="true">
-	<!-- Background backdrop, show/hide based on slide-over state. -->
-	<div class="fixed inset-0 z-10"></div>
-	<div
-		class="fixed inset-y-0 right-0 z-40 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
-	>
+
+	<div class={['fixed inset-0 transition duration-500 ease-in-out bg-stone-900/50', isMenuOpen?'opacity-1':'opacity-0']} ></div>
+
+	<div class="fixed inset-y-0 right-0 z-40 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
 		<div class="flex items-center justify-between">
-			<a href="/" class="-m-1.5 p-1.5">
-				<span class="sr-only">Codeando México</span>
-				<img class="h-8 w-auto" src="/img/logo-cmx.svg" style="width: 100%;" alt="" />
+			<a href="/" onclick={closeHambMenu} class="-m-1.5 p-1.5 rounded-sm hover:bg-gray-100 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen">
+				<span class="sr-only">Inicio</span>
+				<img class="h-8 w-auto" src="/img/logo-cmx.svg" style="width: 100%;" alt="Codeando México" />
 			</a>
-			<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" onclick={closeHambMenu}>
-				<span class="sr-only">Close menu</span>
-				<svg
-					class="h-6 w-6"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					aria-hidden="true"
-				>
+			<button 
+				aria-label="Cerrar menú" 
+				type="button" 
+				onclick={closeHambMenu} 
+				class="-m-2.5 rounded-md p-2.5 text-gray-700 hover:bg-gray-100 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen"
+			>
+				<svg aria-hidden="true" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 				</svg>
 			</button>
 		</div>
 		<div class="mt-6 flow-root">
-			<div class="-my-6">
-				<div class="space-y-2 py-6">
-					{#each menuItems as item}
-						<div class="mx-3 block px-3 py-2 divide-y divide-gray-500 hover:bg-gray-50">
-							<a
-								href={item.url}
-								class={`-text-base font-semibold leading-7 uppercase ${
-									$principalMenuStore.urlActive.includes(item.url)
-										? 'text-cmxgreen'
-										: 'text-gray-900'
-								}`}>{item.name}</a
-							>
-						</div>
-					{/each}
-				</div>
+			<div class="my-6 py-6">
+				{#each menuItems as item}
+					<a
+						href={item.url}
+						onclick={closeHambMenu}
+						class={`my-2 block px-3 py-2 rounded-sm transition text-cmxblack ease-in duration-150 hover:bg-gray-100 hover:underline focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxgreen font-semibold leading-7 uppercase ${
+							$principalMenuStore.urlActive.includes(item.url)
+								? 'bg-cmxgreen'
+								: ''
+						}`}
+					>
+						{item.name}
+					</a>
+				{/each}
 			</div>
 		</div>
 	</div>
diff --git a/src/lib/menuSelectorUpdater.js b/src/lib/menuSelectorUpdater.js
index 8a4d928..b10ed63 100644
--- a/src/lib/menuSelectorUpdater.js
+++ b/src/lib/menuSelectorUpdater.js
@@ -1,9 +1,10 @@
 import { principalMenuStore } from "@/store";
 
-export function updateMenuSelector({url = '/', color = 'text-white'}) {
+export function updateMenuSelector({url = '/', color = 'text-white', background = 'bg-cmxnuanced'}) {
   principalMenuStore.update(data => {
     data.urlActive = url;
     data.color = color;
+    data.background = background;
     return data;
   });
 
@@ -11,6 +12,7 @@ export function updateMenuSelector({url = '/', color = 'text-white'}) {
     principalMenuStore.update(data => {
       data.urlActive = '';
       data.color = '';
+      data.background = '';
       return data;
     });
   };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b9afae1..8488f66 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
 	import Footer from '@/components/Footer.svelte';
 	import Navbar from '@/components/Navbar.svelte';
+	import Header from '@/components/Header.svelte';
 	import '../app.css';
 	/**
 	 * @typedef {Object} Props
@@ -24,9 +25,12 @@
   <meta property="og:image" content={image} />
 </svelte:head>
 
-<Navbar />
+<Header />
 
-{@render children?.()}
+<Navbar />
 
+<main id="main">
+	{@render children?.()}
+</main>
 
 <Footer />
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 3bde607..ff9e7b2 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -21,13 +21,13 @@
 		activeTag = tag.toLocaleLowerCase();
 	};
 
-	$effect(() => updateMenuSelector({ url: '/blog', color: 'text-cmxgreen' }));
+	$effect(() => updateMenuSelector({ url: '/blog', color: 'color-cmxblack', background: 'bg-cmxgreen' }));
 </script>
 
 <div class="container my-20 pt-hero mx-auto">
 	<div class="container m-auto px-3 mb-8">
 		<div class="my-7">
-			<h1 class="text-5xl text-cmxgreen font-bold">Blog</h1>
+			<h1 class="text-5xl font-bold">Blog</h1>
 		</div>
 		<BlogHero
 			slug={highlightedPost.slug}
diff --git a/src/store/index.js b/src/store/index.js
index 6f8027d..250abfc 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,5 +2,6 @@ import { writable } from "svelte/store";
 
 export const principalMenuStore = writable({
   urlActive: '',
-  color: ''
+  color: '',
+  background: ''
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index 589bfea..3f7542c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,16 +5,17 @@ export default {
   theme: {
     extend: {
       dropShadow: {
-             'full': '20px 20px 0px #000000',
-             'mid': '10px 10px 0px #000000',
-              'low': '5px 5px 0px #000000',
-           },
+        'full': '20px 20px 0px #000000',
+        'mid': '10px 10px 0px #000000',
+        'low': '5px 5px 0px #000000',
+      },
       colors: {
         cmxblack: "#030303",
         cmxgreen: "#00D690",
         cmxyellow: "#F2D301",
         cmxred: "#FF6D53",
-        cmxblue: "#0073F4"
+        cmxblue: "#0073F4",
+        cmxnuanced: "#4004"
       },
       padding: {
         hero: '83px'