diff --git a/static/css/mobile-optimized.css b/static/css/mobile-optimized.css
index f5cbe87..b5cd28d 100644
--- a/static/css/mobile-optimized.css
+++ b/static/css/mobile-optimized.css
@@ -125,6 +125,25 @@
         visibility: visible;
     }
     
+    /* ===== User Dropdown for Mobile ===== */
+    .user-dropdown-modal {
+        z-index: 350 !important; /* Higher than sidebar */
+    }
+    
+    .sidebar.active .user-dropdown-modal.active,
+    .sidebar.mobile-open .user-dropdown-modal.active {
+        position: fixed !important;
+        top: 50% !important;
+        left: 50% !important;
+        right: auto !important;
+        transform: translate(-50%, -50%) !important;
+        max-width: 90%;
+        width: 280px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        border-radius: 12px;
+        background: white;
+    }
+    
     /* Mobile menu toggle button */
     .mobile-menu-toggle,
     .mobile-nav-toggle,
diff --git a/static/css/tablet-optimized.css b/static/css/tablet-optimized.css
index 0d644bf..88d911b 100644
--- a/static/css/tablet-optimized.css
+++ b/static/css/tablet-optimized.css
@@ -26,6 +26,23 @@
         transform: translateX(0);
     }
     
+    /* ===== User Dropdown for Tablets ===== */
+    .user-dropdown-modal {
+        z-index: 350 !important; /* Higher than sidebar */
+    }
+    
+    .sidebar.mobile-open .user-dropdown-modal.active {
+        position: fixed !important;
+        top: auto !important;
+        left: 50% !important;
+        right: auto !important;
+        transform: translateX(-50%);
+        max-width: 90%;
+        width: 300px;
+        margin-top: 100px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    }
+    
     /* Show mobile header for tablets */
     .mobile-header {
         display: flex !important;
diff --git a/static/js/sidebar.js b/static/js/sidebar.js
index 62e1be3..0a7028b 100644
--- a/static/js/sidebar.js
+++ b/static/js/sidebar.js
@@ -44,11 +44,16 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
-    // Close mobile sidebar when clicking on navigation links
+    // Close mobile sidebar when clicking on navigation links (but not user dropdown)
     if (sidebar) {
         const navLinks = sidebar.querySelectorAll('a');
         navLinks.forEach(link => {
-            link.addEventListener('click', function() {
+            link.addEventListener('click', function(e) {
+                // Don't close if clicking user dropdown toggle
+                if (link.id === 'user-dropdown-toggle' || link.closest('#user-dropdown-modal')) {
+                    return;
+                }
+                
                 if (window.innerWidth <= 1024) {
                     sidebar.classList.remove('mobile-open');
                     mobileOverlay.classList.remove('active');
diff --git a/static/js/user-dropdown.js b/static/js/user-dropdown.js
index ffb0b06..e5855a7 100644
--- a/static/js/user-dropdown.js
+++ b/static/js/user-dropdown.js
@@ -31,6 +31,10 @@ document.addEventListener('DOMContentLoaded', function() {
     // Close dropdown when clicking outside
     document.addEventListener('click', function(e) {
         if (userDropdownModal && !userDropdownModal.contains(e.target) && !userDropdownToggle.contains(e.target)) {
+            // Don't close if we're clicking on the mobile overlay
+            if (e.target.id === 'mobile-nav-overlay' || e.target.classList.contains('mobile-overlay')) {
+                return;
+            }
             userDropdownModal.classList.remove('active');
         }
     });