diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 99d11347..58185e4c 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -388,31 +388,33 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
 
                 <!-- Mobile Authentication -->
                 {% if not user.is_authenticated %}
-                <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
-                  <h3 class="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
+                <div class="bg-accent/30 rounded-lg p-4 border border-border">
+                  <h3 class="text-sm font-medium text-foreground mb-3">
                     Get Started
                   </h3>
                   <div class="space-y-3">
-                    <button 
-                      hx-get="{% url 'account_login' %}"
-                      hx-target="body"
-                      hx-swap="beforeend"
-                      @click="open = false"
-                      class="w-full px-4 py-3 bg-white dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 font-medium hover:bg-slate-50 dark:hover:bg-slate-600 hover:border-slate-400 dark:hover:border-slate-500 transition-all duration-200 text-center"
-                    >
-                      <i class="fas fa-sign-in-alt mr-2"></i>
-                      Sign In
-                    </button>
-                    <button 
-                      hx-get="{% url 'account_signup' %}"
-                      hx-target="body"
-                      hx-swap="beforeend"
-                      @click="open = false"
-                      class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 border-2 border-blue-600 hover:border-blue-700 rounded-lg text-white font-medium transition-all duration-200 text-center"
-                    >
-                      <i class="fas fa-user-plus mr-2"></i>
-                      Join ThrillWiki
-                    </button>
+                    <c-ui.button 
+                      variant="outline" 
+                      size="lg" 
+                      text="Sign In" 
+                      icon_left="fas fa-sign-in-alt"
+                      button_classes="w-full justify-center"
+                      hx_get="{% url 'account_login' %}"
+                      hx_target="body"
+                      hx_swap="beforeend"
+                      x_on="@click='open = false'"
+                    />
+                    <c-ui.button 
+                      variant="default" 
+                      size="lg" 
+                      text="Join ThrillWiki" 
+                      icon_left="fas fa-user-plus"
+                      button_classes="w-full justify-center"
+                      hx_get="{% url 'account_signup' %}"
+                      hx_target="body"
+                      hx_swap="beforeend"
+                      x_on="@click='open = false'"
+                    />
                   </div>
                 </div>
                 {% endif %}
@@ -458,29 +460,30 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
   </div>
 
   <!-- Mobile Search Bar -->
-  <div class="md:hidden border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
+  <div class="md:hidden border-t border-border bg-background">
     <div class="px-4 py-4">
-      <div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+      <div class="bg-accent/30 rounded-lg p-3 border border-border">
         <div class="flex gap-2">
           <div class="relative flex-1">
-            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-500 dark:text-slate-400"></i>
-            <input
+            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
+            <c-ui.input 
               type="search"
               placeholder="Search parks, rides..."
-              class="w-full pl-10 pr-3 py-3 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
-              hx-get="{% url 'search:search' %}"
-              hx-trigger="input changed delay:300ms"
-              hx-target="#mobile-search-results"
-              hx-include="this"
+              input_classes="pl-10 flex-1"
+              hx_get="{% url 'search:search' %}"
+              hx_trigger="input changed delay:300ms"
+              hx_target="#mobile-search-results"
+              hx_include="this"
               name="q"
             />
           </div>
-          <button 
+          <c-ui.button 
+            variant="default" 
+            size="default" 
+            icon_left="fas fa-search"
+            button_classes="px-4 flex-shrink-0"
             type="submit"
-            class="px-4 py-3 bg-blue-600 hover:bg-blue-700 border border-blue-600 hover:border-blue-700 rounded-lg text-white font-medium transition-all duration-200 flex-shrink-0"
-          >
-            <i class="fas fa-search"></i>
-          </button>
+          />
         </div>
       </div>
       <div id="mobile-search-results" class="mt-3"></div>