diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9e9b51d
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "editor.formatOnSave": true,
+    "editor.formatOnType": false,
+    "notebook.formatOnSave.enabled": true,
+    "editor.formatOnPaste": false
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 04659d8..a5e8afd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,23 +2,18 @@
 	import "../app.postcss";
 	import { Toaster } from "svelte-sonner";
 	import { page } from "$app/stores";
+	import Navbar from "./components/Navbar.svelte";
 
 	let { children } = $props();
 </script>
 
 
-
 <svelte:head>
 	<title>{$page.data.title} - KOKOA</title>
 	<meta name="description" content={$page.data.description} />
 </svelte:head>
 
-<nav>
-	<a href="/">Inicio</a>
-	<a href="/eventos">Eventos</a>
-	<a href="/proyectos">Proyectos</a>
-	<a href="/contacto">Contacto</a>
-	<a href="/miembros">Miembros</a>
-</nav>
-<!--<Toaster richColors closeButton />-->
+<Navbar/>
+
+<Toaster richColors closeButton />
 {@render children()}
\ No newline at end of file
diff --git a/src/routes/components/Navbar.svelte b/src/routes/components/Navbar.svelte
new file mode 100644
index 0000000..865bbbe
--- /dev/null
+++ b/src/routes/components/Navbar.svelte
@@ -0,0 +1,7 @@
+<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>
+</nav>