diff --git a/src/lib/assets/forms/frame.svg b/src/lib/assets/forms/frame.svg
new file mode 100644
index 0000000..7d1453d
--- /dev/null
+++ b/src/lib/assets/forms/frame.svg
@@ -0,0 +1,16 @@
+<svg width="1296" height="261" viewBox="0 0 1296 261" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1296" height="261" fill="url(#paint0_linear_7_2)"/>
+<rect x="981" width="32" height="261" fill="#181617"/>
+<rect x="1019" width="32" height="261" fill="#181617"/>
+<rect x="1057" width="32" height="261" fill="#181617"/>
+<rect x="1095" width="32" height="261" fill="#181617"/>
+<rect x="1133" width="32" height="261" fill="#181617"/>
+<rect x="1171" width="32" height="261" fill="#181617"/>
+<rect x="1209" width="32" height="261" fill="#181617"/>
+<defs>
+<linearGradient id="paint0_linear_7_2" x1="1175.53" y1="-1.0842e-06" x2="120.467" y2="261" gradientUnits="userSpaceOnUse">
+<stop offset="0.105366" stop-color="#A8E063"/>
+<stop offset="1" stop-color="#56AB2F"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/lib/assets/forms/line_nav.svg b/src/lib/assets/forms/line_nav.svg
deleted file mode 100644
index fe3c899..0000000
--- a/src/lib/assets/forms/line_nav.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="1231" height="124" viewBox="0 0 1231 124" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 1.75275L481.607 1.25175C501.456 1.25173 543.244 -4.96093 543.244 44.3396V104.963C543.244 110.474 546.483 121.798 553.169 123H611.149C613.761 115.986 621.074 104.963 629.954 104.963H1227V73.3989" stroke="#6DD743"/>
-<circle cx="1226.5" cy="70.5" r="4.5" fill="white"/>
-</svg>
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 41fc91b..48dcf96 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -3,9 +3,9 @@
 	import gecko_code from "$lib/assets/logos/gecko-code.svg";
 
 	const current_path = $derived($page.url.pathname);
-	
+
 	let menuOpen = $state(false);
-	
+
 	const LINKS = [
 		{ text: "Inicio", href: "/" },
 		{ text: "Eventos", href: "/events" },
@@ -21,7 +21,6 @@
 	const closeMenu = () => {
 		menuOpen = false;
 	};
-
 </script>
 
 <nav class="nav-background flex items-center justify-between p-4">
@@ -32,7 +31,7 @@
 		<span class="line"></span>
 		<span class="line"></span>
 	</button>
-	<div class="links relative z-10 flex gap-x-8 text-lg links {menuOpen ? 'open' : ''}">
+	<div class="links links relative z-10 flex gap-x-8 text-lg {menuOpen ? 'open' : ''}">
 		{#each LINKS as { href, text } (href)}
 			<a {href} class="relative font-fira hover:underline" on:click={closeMenu}>
 				<span
@@ -62,7 +61,6 @@
 	.nav-background {
 		background-image: url("$lib/assets/forms/line.svg");
 		background-repeat: no-repeat;
-		background-position: left;
 		top: 20px;
 		background-size: 97% auto;
 	}
@@ -85,10 +83,10 @@
 		background-color: white;
 	}
 
-/* Estilos para pantallas pequeñas */
+	/* Estilos para pantallas pequeñas */
 	@media (max-width: 768px) {
 		.links {
-			position: fixed; /* Posición fija para que el menú cubra toda la pantalla */
+			position: fixed;
 			inset: 0; /* El menú ocupará toda la pantalla */
 			background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro para mayor visibilidad */
 			z-index: 50; /* Asegurar que esté por delante de otros elementos */
@@ -100,6 +98,9 @@
 			width: 100%;
 		}
 
+		nav img {
+			margin-bottom: 5rem;
+		}
 		.links.open {
 			display: flex; /* Mostrar el menú cuando esté abierto */
 		}
@@ -107,6 +108,7 @@
 		.hamburger {
 			display: flex;
 			margin-right: 20px;
+			margin-bottom: 5rem;
 		}
 	}
 
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 8efd9c5..0b8e196 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import Event from "$lib/components/Event.svelte";
-
+	import Heading from "$lib/components/layout/Heading.svelte";
+ 
 	let { data } = $props();
 </script>
-
+<Heading title="EVENTOS" />
 <div class="flex flex-col items-center px-8">
 	{#each data.events as event}
 		<Event
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 8e69570..e2ff427 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import CommonCard from "$lib/components/CommonCard.svelte";
+	import Heading from "$lib/components/layout/Heading.svelte";
 
 	let { data } = $props();
 </script>
-
+<Heading title="PROYECTOS" />
 <p class="font-medium">{data.description}</p>
 <div class="mt-8 flex flex-col items-center sm:flex sm:flex-row sm:flex-wrap">
 	{#each data.projects as project}