diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css
index 135b80f..18ea7c7 100644
--- a/public/s/css/f0ck.css
+++ b/public/s/css/f0ck.css
@@ -3122,125 +3122,243 @@ input#s_avatar {
   color: #888;
   font-size: 0.9em;
 }
+
 /* Search Overlay */
 #search-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(5px);
-    z-index: 10000;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(5px);
+  z-index: 10000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
 }
 
 #search-overlay.visible {
-    opacity: 1;
+  opacity: 1;
 }
 
 #search-input {
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid var(--accent);
-    color: var(--white);
-    font-size: 3rem;
-    width: 100%;
-    max-width: 800px;
-    text-align: center;
-    outline: none;
-    font-family: var(--font);
-    padding: 10px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid var(--accent);
+  color: var(--white);
+  font-size: 3rem;
+  width: 100%;
+  max-width: 800px;
+  text-align: center;
+  outline: none;
+  font-family: var(--font);
+  padding: 10px;
 }
 
 #search-input::placeholder {
-    color: #555;
-    text-transform: uppercase;
+  color: #555;
+  text-transform: uppercase;
 }
 
 #search-close {
-    position: absolute;
-    top: 20px;
-    right: 30px;
-    color: var(--white);
-    font-size: 2rem;
-    cursor: pointer;
-    font-family: sans-serif;
-    opacity: 0.7;
-    transition: opacity 0.2s;
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  color: var(--white);
+  font-size: 2rem;
+  cursor: pointer;
+  font-family: sans-serif;
+  opacity: 0.7;
+  transition: opacity 0.2s;
 }
 
 #search-close:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 /* Delete Tag Modal */
 .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(5px);
-    z-index: 10001;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(5px);
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .modal-content {
-    background: var(--dropdown-bg);
-    border: 1px solid var(--nav-border-color);
-    padding: 30px;
-    border-radius: 10px;
-    text-align: center;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-    min-width: 300px;
+  background: var(--dropdown-bg);
+  border: 1px solid var(--nav-border-color);
+  padding: 30px;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  min-width: 300px;
 }
 
 .modal-content h3 {
-    margin-top: 0;
-    color: var(--white);
+  margin-top: 0;
+  color: var(--white);
 }
 
 .modal-content p {
-    color: #ccc;
-    margin: 20px 0;
+  color: #ccc;
+  margin: 20px 0;
 }
 
 .modal-actions {
-    display: flex;
-    justify-content: center;
-    gap: 15px;
+  display: flex;
+  justify-content: center;
+  gap: 15px;
 }
 
 .modal-actions button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-weight: bold;
-    font-family: var(--font);
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: bold;
+  font-family: var(--font);
 }
 
 .btn-danger {
-    background: #e74c3c;
-    color: white;
+  background: #e74c3c;
+  color: white;
 }
+
 .btn-danger:hover {
-    background: #c0392b;
+  background: #c0392b;
 }
 
 .btn-secondary {
-    background: #555;
-    color: white;
+  background: #555;
+  color: white;
 }
+
 .btn-secondary:hover {
-    background: #666;
+  background: #666;
+}
+
+/* Nav User Dropdown */
+.nav-user-dropdown {
+  position: relative;
+  margin-left: 15px;
+}
+
+.nav-user-btn {
+  background: transparent;
+  border: 1px solid var(--nav-border-color);
+  color: var(--white);
+  padding: 6px 12px;
+  border-radius: 0;
+  cursor: pointer;
+  font-family: var(--font);
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.nav-user-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--nav-border-color-hover);
+}
+
+.nav-user-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  min-width: 150px;
+  background: var(--dropdown-bg);
+  border: 1px solid var(--nav-border-color);
+  border-radius: 0;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  z-index: 10000;
+  overflow: hidden;
+}
+
+.nav-user-menu.show {
+  display: block;
+}
+
+.nav-user-menu a {
+  display: block;
+  padding: 10px 15px;
+  color: var(--white);
+  text-decoration: none;
+  transition: background 0.2s;
+}
+
+.nav-user-menu a:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.nav-user-divider {
+  height: 1px;
+  background: var(--nav-border-color);
+  margin: 5px 0;
+}
+/* Nav Left Group - Flexbox for dropdown + links */
+.nav-left-group {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.nav-links a {
+    color: var(--white);
+    text-decoration: none;
+    font-size: 14px;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.nav-links a:hover {
+    opacity: 1;
+}
+
+.nav-links svg {
+    vertical-align: middle;
+}
+
+/* Mobile responsive navbar */
+@media (max-width: 600px) {
+    .navbar {
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+    
+    .nav-left-group {
+        order: 2;
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .nav-links {
+        gap: 8px;
+    }
+    
+    .nav-user-btn {
+        padding: 4px 8px;
+        font-size: 12px;
+    }
+    
+    .nav-links a {
+        font-size: 12px;
+    }
 }
diff --git a/public/s/js/f0ck.js b/public/s/js/f0ck.js
index c49ae46..3930e17 100644
--- a/public/s/js/f0ck.js
+++ b/public/s/js/f0ck.js
@@ -9,6 +9,21 @@ window.requestAnimFrame = (function () {
 (() => {
   let video;
 
+  // User dropdown toggle
+  const userToggle = document.getElementById('nav-user-toggle');
+  const userMenu = document.getElementById('nav-user-menu');
+  if (userToggle && userMenu) {
+    userToggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      userMenu.classList.toggle('show');
+    });
+    document.addEventListener('click', (e) => {
+      if (!userMenu.contains(e.target) && !userToggle.contains(e.target)) {
+        userMenu.classList.remove('show');
+      }
+    });
+  }
+
   // Initialize background preference
   if (localStorage.getItem('background') == undefined) {
     localStorage.setItem('background', 'true');
@@ -272,6 +287,11 @@ window.requestAnimFrame = (function () {
         const main = document.getElementById('main');
         main.innerHTML = '<div class="container"></div>';
         container = main.querySelector('.container');
+      } else if (!container && document.getElementById('main')) {
+        // Transition from User Profile or other pages without .container
+        const main = document.getElementById('main');
+        main.innerHTML = '<div class="container"></div>';
+        container = main.querySelector('.container');
       } else if (container) {
         // Check if we are on Tags Overview logic (which reuses .container)
         const tagsOverview = container.querySelector('.tags');
diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html
index 6e5ffc7..f81ae3e 100644
--- a/views/snippets/navbar.html
+++ b/views/snippets/navbar.html
@@ -2,8 +2,20 @@
 <!-- logged in -->
 <nav class="navbar navbar-expand-lg">
   <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
-  <div class="navigation-links-guest">
-    <ol>
+  <div class="nav-left-group">
+    <div class="nav-user-dropdown">
+      <button class="nav-user-btn" id="nav-user-toggle">
+        {{ session.user }} ▾
+      </button>
+      <div class="nav-user-menu" id="nav-user-menu">
+        <a href="/user/{{ session.user.toLowerCase() }}">profile</a>
+        <a href="/user/{{ session.user.toLowerCase() }}/favs">favs</a>
+        <a href="/settings">settings</a>
+        <div class="nav-user-divider"></div>
+        <a href="/logout">logout</a>
+      </div>
+    </div>
+    <div class="nav-links">
       <a href="/tags">tags</a>
       <a href="/about">about</a>
       @if(!/^\/\d$/.test(url.pathname))
@@ -14,7 +26,7 @@
           <path
             d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
         </svg></a>
-    </ol>
+    </div>
   </div>
   <!-- show pagination only for tags and main page -->
   @if(!/^\/\d+$/.test(url.pathname))