diff --git a/attached_assets/SCR-20250921-moio_1758477961641.png b/attached_assets/SCR-20250921-moio_1758477961641.png
new file mode 100644
index 00000000..edf2475a
Binary files /dev/null and b/attached_assets/SCR-20250921-moio_1758477961641.png differ
diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 7c89021b..1e37fc99 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -166,37 +166,42 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
     </div>
 
     <!-- Desktop Right Side -->
-    <div class="hidden md:flex items-center gap-3 shrink-0">
-
+    <div class="hidden md:flex items-center gap-4 shrink-0">
       <!-- Theme Toggle -->
-      <div x-data="themeToggle">
-        <button 
-          @click="toggleTheme()"
-          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
-        >
-          <i class="fas fa-sun h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
-          <i class="fas fa-moon absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
-          <span class="sr-only">Toggle theme</span>
-        </button>
-      </div>
-
-      <!-- User Menu -->
-      {% if user.is_authenticated %}
-        <div class="relative" x-data="{ open: false }" @click.outside="open = false">
-          <button @click="open = !open" class="relative h-8 w-8 rounded-full">
-            {% if user.profile.avatar %}
-              <img 
-                src="{{ user.profile.avatar.url }}" 
-                alt="{{ user.get_full_name|default:user.username }}"
-                class="h-8 w-8 rounded-full object-cover"
-              />
-            {% else %}
-              <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">
-                {{ user.get_full_name.0|default:user.username.0|upper }}
-              </div>
-            {% endif %}
-          </button>
+      <button 
+        x-data="themeToggle"
+        @click="toggleTheme()"
+        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
+      >
+        <i class="fas fa-sun h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
+        <i class="fas fa-moon absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
+        <span class="sr-only">Toggle theme</span>
+      </button>
 
+      <!-- User Icon -->
+      <button 
+        {% if user.is_authenticated %}
+          x-data="{ open: false }" 
+          @click="open = !open"
+          @click.outside="open = false"
+        {% else %}
+          @click="window.authModal.show('login')"
+        {% endif %}
+        class="relative inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
+      >
+        {% if user.is_authenticated %}
+          {% if user.profile.avatar %}
+            <img 
+              src="{{ user.profile.avatar.url }}" 
+              alt="{{ user.get_full_name|default:user.username }}"
+              class="h-6 w-6 rounded-full object-cover"
+            />
+          {% else %}
+            <div class="h-6 w-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-medium">
+              {{ user.get_full_name.0|default:user.username.0|upper }}
+            </div>
+          {% endif %}
+          
           <!-- User Dropdown -->
           <div 
             x-show="open"
@@ -207,7 +212,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
             x-transition:leave-start="transform opacity-100 scale-100"
             x-transition:leave-end="transform opacity-0 scale-95"
             x-cloak
-            class="absolute right-0 mt-2 w-56 bg-background border rounded-md shadow-lg z-50"
+            class="absolute right-0 top-full mt-2 w-56 bg-background border rounded-md shadow-lg z-50"
           >
             <div class="flex items-center justify-start gap-2 p-2">
               <div class="flex flex-col space-y-1 leading-none">
@@ -239,25 +244,10 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
               </button>
             </form>
           </div>
-        </div>
-      {% else %}
-        <div class="flex items-center gap-2">
-          <c-button 
-            variant="outline" 
-            size="default"
-            x_on="@click='window.authModal.show(\'login\')'"
-          >
-            Sign In
-          </c-button>
-          <c-button 
-            variant="default" 
-            size="default"
-            x_on="@click='window.authModal.show(\'register\')'"
-          >
-            Sign Up
-          </c-button>
-        </div>
-      {% endif %}
+        {% else %}
+          <i class="fas fa-user h-5 w-5"></i>
+        {% endif %}
+      </button>
     </div>
 
     <!-- Mobile Menu -->