diff --git a/src/server/views/layouts/layout.ejs b/src/server/views/layouts/layout.ejs
index 197ab31..f7b08b3 100644
--- a/src/server/views/layouts/layout.ejs
+++ b/src/server/views/layouts/layout.ejs
@@ -43,7 +43,9 @@
     <%= head %>
   <% } %>
 </head>
-<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased">
+<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased pt-14">
+
+  <%- await include('../partials/navbar', { appName }) %>
 
   <!-- Animated Background Blobs -->
   <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
diff --git a/src/server/views/pages/index.ejs b/src/server/views/pages/index.ejs
index bc75e1d..d0baec9 100644
--- a/src/server/views/pages/index.ejs
+++ b/src/server/views/pages/index.ejs
@@ -67,36 +67,40 @@
   <div class="flex min-h-screen flex-col">
 
     <div class="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-10 px-6 pb-16 lg:flex-row lg:px-10">
-      <%- include('../partials/toc') %>
+      <%- await include('../partials/toc') %>
 
-      <main class="flex-1">
+      <main class="flex-1 min-w-0">
         <div class="mx-auto flex w-full max-w-3xl flex-col gap-8">
-          <%- include('../partials/sections/primeros-pasos') %>
-          <%- include('../partials/sections/comandos-basicos') %>
-          <%- include('../partials/sections/sistema-juego') %>
-          <%- include('../partials/sections/minijuegos') %>
-          <%- include('../partials/sections/inventario-equipo') %>
-          <%- include('../partials/sections/economia') %>
-          <%- include('../partials/sections/tienda') %>
-          <%- include('../partials/sections/crafteo') %>
-          <%- include('../partials/sections/logros') %>
-          <%- include('../partials/sections/misiones') %>
-          <%- include('../partials/sections/racha') %>
-          <%- include('../partials/sections/consumibles') %>
-          <%- include('../partials/sections/cofres') %>
-          <%- include('../partials/sections/encantamientos') %>
-          <%- include('../partials/sections/fundicion') %>
-          <%- include('../partials/sections/ia') %>
-          <%- include('../partials/sections/recordatorios') %>
-          <%- include('../partials/sections/alianzas') %>
-          <%- include('../partials/sections/admin') %>
-          <%- include('../partials/sections/creacion-contenido') %>
-          <%- include('../partials/sections/configuracion') %>
-          <%- include('../partials/sections/estadisticas') %>
-          <%- include('../partials/sections/tips') %>
-          <%- include('../partials/sections/faq') %>
+          <%- await include('../partials/sections/primeros-pasos') %>
+          <%- await include('../partials/sections/comandos-basicos') %>
+          <%- await include('../partials/sections/sistema-juego') %>
+          <%- await include('../partials/sections/minijuegos') %>
+          <%- await include('../partials/sections/inventario-equipo') %>
+          <%- await include('../partials/sections/economia') %>
+          <%- await include('../partials/sections/tienda') %>
+          <%- await include('../partials/sections/crafteo') %>
+          <%- await include('../partials/sections/logros') %>
+          <%- await include('../partials/sections/misiones') %>
+          <%- await include('../partials/sections/racha') %>
+          <%- await include('../partials/sections/consumibles') %>
+          <%- await include('../partials/sections/cofres') %>
+          <%- await include('../partials/sections/encantamientos') %>
+          <%- await include('../partials/sections/fundicion') %>
+          <%- await include('../partials/sections/ia') %>
+          <%- await include('../partials/sections/recordatorios') %>
+          <%- await include('../partials/sections/alianzas') %>
+          <%- await include('../partials/sections/admin') %>
+          <%- await include('../partials/sections/creacion-contenido') %>
+          <%- await include('../partials/sections/configuracion') %>
+          <%- await include('../partials/sections/estadisticas') %>
+          <%- await include('../partials/sections/tips') %>
+          <%- await include('../partials/sections/faq') %>
         </div>
       </main>
+
+      <aside class="w-full lg:w-80 xl:w-96 lg:sticky lg:top-24 lg:h-fit lg:self-start">
+        <%- await include('../partials/rightSidebar') %>
+      </aside>
     </div>
   </div>
 </div>
diff --git a/src/server/views/partials/navbar.ejs b/src/server/views/partials/navbar.ejs
new file mode 100644
index 0000000..e98f683
--- /dev/null
+++ b/src/server/views/partials/navbar.ejs
@@ -0,0 +1,16 @@
+<nav class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/70 backdrop-blur">
+  <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
+    <a href="#" class="text-white font-bold tracking-wide"><%= appName %></a>
+    <div class="hidden md:flex items-center gap-4 text-sm">
+      <a href="#primeros-pasos" class="text-slate-300 hover:text-white">Guía</a>
+      <a href="#minijuegos" class="text-slate-300 hover:text-white">Minijuegos</a>
+      <a href="#economia" class="text-slate-300 hover:text-white">Economía</a>
+      <a href="#faq" class="text-slate-300 hover:text-white">FAQ</a>
+    </div>
+    <button id="toggle-nav" class="md:hidden text-slate-300 hover:text-white" aria-label="Abrir navegación">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+      </svg>
+    </button>
+  </div>
+</nav>
diff --git a/src/server/views/partials/rightSidebar.ejs b/src/server/views/partials/rightSidebar.ejs
new file mode 100644
index 0000000..cc03831
--- /dev/null
+++ b/src/server/views/partials/rightSidebar.ejs
@@ -0,0 +1,32 @@
+<div class="space-y-6">
+  <!-- Ko-fi card -->
+  <div class="rounded-2xl border border-white/10 bg-slate-900/70 shadow-2xl shadow-indigo-500/10 overflow-hidden">
+    <div class="p-4 border-b border-white/10">
+      <h3 class="text-sm font-semibold text-slate-200">Apoya el proyecto</h3>
+    </div>
+    <div class="p-2 bg-slate-900">
+      <iframe id="kofiframe" src="https://ko-fi.com/shnimlz/?hidefeed=true&widget=true&embed=true&preview=true"
+              style="border:none;width:100%;padding:4px;background:#0b1020;"
+              height="712" title="shnimlz"></iframe>
+    </div>
+  </div>
+
+  <!-- Info cards -->
+  <div class="rounded-2xl border border-indigo-500/20 bg-indigo-500/10 p-4">
+    <h4 class="text-sm font-semibold text-indigo-200 mb-2">Novedades</h4>
+    <ul class="space-y-1 text-xs text-slate-300">
+      <li>• Nueva guía con layout EJS</li>
+      <li>• Mejoras de rendimiento del bot</li>
+      <li>• Sistema de economía ampliado</li>
+    </ul>
+  </div>
+
+  <div class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-4">
+    <h4 class="text-sm font-semibold text-emerald-200 mb-2">Recursos útiles</h4>
+    <ul class="space-y-1 text-xs text-slate-300">
+      <li><a class="hover:text-white" href="#primeros-pasos">• Primeros pasos</a></li>
+      <li><a class="hover:text-white" href="#economia">• Economía</a></li>
+      <li><a class="hover:text-white" href="#faq">• FAQ</a></li>
+    </ul>
+  </div>
+</div>
