diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 43f73a5d..6c79ce88 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -308,23 +308,19 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
           </div>
         </div>
       {% else %}
-        <div class="flex items-center space-x-1">
-          <div 
-            hx-get="{% url 'account_login' %}"
-            hx-target="body"
-            hx-swap="beforeend"
-            class="cursor-pointer"
+        <div class="flex items-center space-x-2">
+          <button 
+            @click="window.authModal.show('login')"
+            class="inline-flex items-center justify-center gap-2 whitespace-nowrap 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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 min-w-[70px]"
           >
-            {% include 'components/ui/button.html' with variant='outline' size='sm' text='Login' %}
-          </div>
-          <div 
-            hx-get="{% url 'account_signup' %}"
-            hx-target="body"
-            hx-swap="beforeend"
-            class="cursor-pointer"
+            Sign In
+          </button>
+          <button 
+            @click="window.authModal.show('register')"
+            class="inline-flex items-center justify-center gap-2 whitespace-nowrap 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 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 min-w-[70px]"
           >
-            {% include 'components/ui/button.html' with variant='default' size='sm' text='Join' %}
-          </div>
+            Join
+          </button>
         </div>
       {% endif %}