diff --git a/src/server/views/pages/dashboard.ejs b/src/server/views/pages/dashboard.ejs
index eb17daa..73b18f4 100644
--- a/src/server/views/pages/dashboard.ejs
+++ b/src/server/views/pages/dashboard.ejs
@@ -20,7 +20,7 @@
               <div class="ml-3 relative">
                 <button id="cardUserBtn" class="flex items-center gap-2 px-3 py-1 rounded-md hover:bg-white/5 focus:outline-none" aria-expanded="false">
                   <% if (user && user.id && user.avatar) { %>
-                    <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png" class="w-8 h-8 rounded-full" alt="avatar">
+                    <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.webp" class="w-8 h-8 rounded-full" alt="avatar">
                   <% } else { %>
                     <img src="/assets/images/snap1.svg" class="w-8 h-8 rounded-full" alt="avatar">
                   <% } %>
@@ -40,7 +40,7 @@
                   <div class="p-3 cursor-pointer hover:bg-white/5 flex items-center justify-between text-white" data-id="<%= g.id %>">
                     <div class="flex items-center gap-3">
                       <% if (g.icon) { %>
-                        <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-8 h-8 rounded-full" alt="icon">
+                        <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
                       <% } else { %>
                         <div class="w-8 h-8 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
                       <% } %>
@@ -320,9 +320,30 @@
     }
     drawerToggle?.addEventListener('click', openDrawer);
     drawerBackdrop?.addEventListener('click', closeDrawer);
+    // support close button inside the drawer
+    const drawerClose = document.getElementById('drawerClose');
+    drawerClose?.addEventListener('click', closeDrawer);
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') closeDrawer();
     });
   </script>
 
+  <!-- Mobile drawer & backdrop (used by hamburger) -->
+  <div id="drawerBackdrop" class="fixed inset-0 bg-black/60 hidden z-40"></div>
+  <nav id="mobileDrawer" class="fixed top-0 left-0 bottom-0 w-72 max-w-xs bg-[#0f1720] -translate-x-full transform transition-transform duration-200 z-50">
+    <div class="p-4 border-b border-white/6 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <% if (user && user.id && user.avatar) { %>
+          <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.webp" class="w-8 h-8 rounded-full" alt="avatar">
+        <% } %>
+        <div class="text-white font-medium"><%= user?.username || '' %></div>
+      </div>
+      <button id="drawerClose" class="text-white/70">Cerrar</button>
+    </div>
+    <div class="p-4 space-y-2">
+      <a href="/dashboard/select-guild" class="block py-2 text-white">Servers</a>
+      <a href="/auth/logout" class="block py-2 text-rose-300">Log out</a>
+    </div>
+  </nav>
+
 
diff --git a/src/server/views/partials/dashboard_nav.ejs b/src/server/views/partials/dashboard_nav.ejs
index 612f152..4d4ace8 100644
--- a/src/server/views/partials/dashboard_nav.ejs
+++ b/src/server/views/partials/dashboard_nav.ejs
@@ -26,7 +26,7 @@
                 <% guilds.forEach(g => { %>
                   <div class="p-1 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-3" data-id="<%= g.id %>">
                     <% if (g.icon) { %>
-                      <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-5 h-5 rounded-full" alt="icon">
+                      <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-5 h-5 rounded-full" alt="icon">
                     <% } else { %>
                       <div class="w-5 h-5 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
                     <% } %>
@@ -50,7 +50,7 @@
             <% } %>
             <svg class="w-3 h-3 text-white/80 ml-1" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
           </button>
-          <div id="userMenu" class="origin-top-right absolute right-0 mt-2 w-36 bg-white/80 backdrop-blur-md rounded-md p-2 hidden z-50" style="background-color: rgba(12,15,18,0.9);">
+          <div id="userMenu" class="origin-top-right absolute right-0 mt-2 w-36 bg-white/80 backdrop-blur-md rounded-md p-2 hidden md:block z-50" style="background-color: rgba(12,15,18,0.9);">
             <a href="/auth/logout" class="block px-3 py-2 text-sm text-rose-300 hover:bg-white/5 rounded">Log out</a>
           </div>
         </div>
@@ -143,7 +143,7 @@
         <% guilds.forEach(g => { %>
           <div class="flex items-center gap-3 p-2 rounded-md hover:bg-white/5 cursor-pointer" data-id="<%= g.id %>">
             <% if (g.icon) { %>
-              <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-8 h-8 rounded-full" alt="icon">
+              <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
             <% } else { %>
               <div class="w-8 h-8 rounded-full bg-white/8"></div>
             <% } %>
@@ -161,7 +161,7 @@
   <div class="absolute bottom-0 left-0 right-0 bg-[#1f2933] rounded-t-xl p-4">
   <h3 class="text-white font-medium mb-3">User settings</h3>
   <a href="/dashboard/select-guild" class="block py-2 text-white">Servers</a>
-  <!-- Log out is available in the user card/menu so we avoid duplicating it here -->
+  <a href="/auth/logout" class="block py-2 text-rose-300">Log out</a>
   <div class="text-right mt-2"><button id="mobileUserClose" class="text-white/70">Cerrar</button></div>
   </div>
 </div>