diff --git a/src/lib/assets/images/logo.png b/src/lib/assets/images/logo.png
new file mode 100644
index 0000000..f2d6d4f
Binary files /dev/null and b/src/lib/assets/images/logo.png differ
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 14b0b61..5f88a65 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import "../app.postcss";
 	import { Toaster } from "svelte-sonner";
 	import { page } from "$app/stores";
-	import Navbar from "./components/Navbar.svelte";	
+	import Navbar from "./components/Navbar.svelte";
 	let { children } = $props();
 </script>
 
@@ -11,7 +11,7 @@
 	<meta name="description" content={$page.data.description} />
 </svelte:head>
 
-<Navbar/>
+<Navbar />
 
 <Toaster richColors closeButton />
 {@render children()}
diff --git a/src/routes/components/Navbar.svelte b/src/routes/components/Navbar.svelte
index 865bbbe..0e14c60 100644
--- a/src/routes/components/Navbar.svelte
+++ b/src/routes/components/Navbar.svelte
@@ -1,7 +1,85 @@
-<nav>
-	<a href="/">Inicio</a>
-	<a href="/events">Eventos</a>
-	<a href="/projects">Proyectos</a>
-	<a href="/contact">Contacto</a>
-	<a href="/member">Miembros</a>
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { derived } from "svelte/store";
+	import logo from "$lib/assets/images/logo.png";
+
+	// Derivar la ruta actual desde el store de la página
+	const path = derived(page, ($page) => $page.url.pathname);
+
+	// Variable que mantiene el path actual
+	let currentPath: string;
+
+	// Suscribirse al store para obtener actualizaciones
+	path.subscribe((value) => {
+		currentPath = value;
+	});
+</script>
+
+<nav class="relative flex items-center justify-between bg-black p-4">
+	<div class="flex items-center">
+		<img src={logo} alt="Logo" class="mr-4 h-10" />
+	</div>
+	<div class="flex space-x-8 text-lg text-white">
+		<!-- Enlace Inicio -->
+		<a href="/" class="hover:underline">
+			{#if currentPath === "/"}
+				<span class="font-bold text-green-400">
+					<span class="text-green-400">{"{"}</span>
+					<span class="text-white">Inicio</span>
+					<span class="text-green-400">{"}"}</span>
+				</span>
+			{:else}
+				Inicio
+			{/if}
+		</a>
+		<!-- Enlace Eventos -->
+		<a href="/events" class="hover:underline">
+			{#if currentPath === "/events"}
+				<span class="font-bold text-green-400">
+					<span class="text-green-400">{"{"}</span>
+					<span class="text-white">Eventos</span>
+					<span class="text-green-400">{"}"}</span>
+				</span>
+			{:else}
+				Eventos
+			{/if}
+		</a>
+		<!-- Enlace Proyectos -->
+		<a href="/projects" class="hover:underline">
+			{#if currentPath === "/projects"}
+				<span class="font-bold text-green-400">
+					<span class="text-green-400">{"{"}</span>
+					<span class="text-white">Proyectos</span>
+					<span class="text-green-400">{"}"}</span>
+				</span>
+			{:else}
+				Proyectos
+			{/if}
+		</a>
+		<!-- Enlace Contacto -->
+		<a href="/contact" class="hover:underline">
+			{#if currentPath === "/contact"}
+				<span class="font-bold text-green-400">
+					<span class="text-green-400">{"{"}</span>
+					<span class="text-white">Contacto</span>
+					<span class="text-green-400">{"}"}</span>
+				</span>
+			{:else}
+				Contacto
+			{/if}
+		</a>
+		<!-- Enlace Miembros -->
+		<a href="/member" class="hover:underline">
+			{#if currentPath === "/member"}
+				<span class="font-bold text-green-400">
+					<span class="text-green-400">{"{"}</span>
+					<span class="text-white">Miembros</span>
+					<span class="text-green-400">{"}"}</span>
+				</span>
+			{:else}
+				Miembros
+			{/if}
+		</a>
+	</div>
+	<div class="absolute bottom-0 left-0 z-0 h-px w-full bg-green-500"></div>
 </nav>