diff --git a/resources/js/alpine/components/theme-toggle.js b/resources/js/alpine/components/theme-toggle.js
index a77296ad3..1e95705b0 100644
--- a/resources/js/alpine/components/theme-toggle.js
+++ b/resources/js/alpine/components/theme-toggle.js
@@ -49,4 +49,16 @@ Alpine.data('themeRadio', () => ({
             Alpine.store('theme').set(this.value);
         });
     });
+
+    // Dropdown and mobile theme switcher buttons
+    document.querySelectorAll('.dropdown-theme-btn, .mobile-theme-btn').forEach(function(btn) {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            var theme = this.dataset.theme;
+            if (theme) {
+                Alpine.store('theme').set(theme);
+            }
+        });
+    });
 })();
diff --git a/resources/js/alpine/stores/theme.js b/resources/js/alpine/stores/theme.js
index a38017d6f..01e17ed7f 100644
--- a/resources/js/alpine/stores/theme.js
+++ b/resources/js/alpine/stores/theme.js
@@ -66,6 +66,23 @@ Alpine.store('theme', {
         if (toggle) {
             toggle.title = this.title();
         }
+
+        // Update dropdown & mobile theme switcher buttons
+        var self = this;
+        document.querySelectorAll('.dropdown-theme-btn, .mobile-theme-btn').forEach(function(btn) {
+            var isActive = btn.dataset.theme === self.current;
+            btn.classList.remove('bg-blue-600', 'text-white', 'text-gray-300', 'hover:bg-gray-800', 'hover:bg-gray-700', 'hover:text-white');
+            if (isActive) {
+                btn.classList.add('bg-blue-600', 'text-white');
+            } else {
+                btn.classList.add('text-gray-300', 'hover:text-white');
+                if (btn.classList.contains('mobile-theme-btn')) {
+                    btn.classList.add('hover:bg-gray-700');
+                } else {
+                    btn.classList.add('hover:bg-gray-800');
+                }
+            }
+        });
     },
 
     icon() {
diff --git a/resources/views/partials/header-menu.blade.php b/resources/views/partials/header-menu.blade.php
index 21d248117..ab36fbb61 100644
--- a/resources/views/partials/header-menu.blade.php
+++ b/resources/views/partials/header-menu.blade.php
@@ -250,6 +250,32 @@
                                 </a>
                             @endif
                             <div class="border-t border-gray-700"></div>
+                            <!-- Theme Switcher -->
+                            <div class="px-4 py-2">
+                                <span class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Theme</span>
+                                <div class="flex items-center gap-1" id="dropdown-theme-switcher">
+                                    @php $currentTheme = auth()->user()->theme_preference ?? 'light'; @endphp
+                                    <button type="button" data-theme="light"
+                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'light' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
+                                        title="Light Mode">
+                                        <i class="fas fa-sun"></i>
+                                        <span>Light</span>
+                                    </button>
+                                    <button type="button" data-theme="dark"
+                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'dark' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
+                                        title="Dark Mode">
+                                        <i class="fas fa-moon"></i>
+                                        <span>Dark</span>
+                                    </button>
+                                    <button type="button" data-theme="system"
+                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'system' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
+                                        title="System (Auto)">
+                                        <i class="fas fa-desktop"></i>
+                                        <span>Auto</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="border-t border-gray-700"></div>
                             <a href="{{ route('profile') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
                                 <i class="fa fa-user fa-fw mr-2"></i>Profile
                             </a>
@@ -402,6 +428,31 @@
                             <i class="fa fa-cogs fa-fw mr-3 text-gray-400"></i>Admin
                         </a>
                     @endif
+                    <!-- Mobile Theme Switcher -->
+                    <div class="px-4 py-2.5">
+                        <span class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Theme</span>
+                        <div class="flex items-center gap-1.5" id="mobile-theme-switcher">
+                            @php $mobileTheme = auth()->user()->theme_preference ?? 'light'; @endphp
+                            <button type="button" data-theme="light"
+                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'light' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
+                                title="Light Mode">
+                                <i class="fas fa-sun"></i>
+                                <span>Light</span>
+                            </button>
+                            <button type="button" data-theme="dark"
+                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'dark' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
+                                title="Dark Mode">
+                                <i class="fas fa-moon"></i>
+                                <span>Dark</span>
+                            </button>
+                            <button type="button" data-theme="system"
+                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'system' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
+                                title="System (Auto)">
+                                <i class="fas fa-desktop"></i>
+                                <span>Auto</span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             @endauth
         </div>