diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 80ba6986d..cc94b33d3 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -40,7 +40,57 @@
                     <h1 class="text-2xl font-bold tracking-tight text-gray-950 dark:text-white sm:text-3xl">{{ $title ?? 'Page Title' }} - {{ config('app.name') }}</h1>
                 </div>
 
-                <div class="flex-shrink-0">
+                <div class="flex items-center flex-shrink-0 gap-4">
+                    <div
+                        x-data="{ theme: null }"
+                        x-init="
+                            theme = localStorage.getItem('theme') || 'system'
+                            $watch('theme', () => {
+                                localStorage.setItem('theme', theme)
+                                const effectiveTheme = theme === 'system'
+                                    ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+                                    : theme
+                                if (effectiveTheme === 'dark') {
+                                    document.documentElement.classList.add('dark')
+                                } else {
+                                    document.documentElement.classList.remove('dark')
+                                }
+                                $dispatch('theme-changed', theme)
+                            })
+                        "
+                        class="flex items-center gap-1 p-1 rounded-lg bg-gray-100 dark:bg-gray-800"
+                    >
+                        <button
+                            type="button"
+                            x-on:click="theme = 'light'"
+                            x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'light' }"
+                            class="p-2 rounded-md transition-all"
+                            aria-label="Light mode"
+                        >
+                            <x-tabler-sun class="size-4" />
+                        </button>
+
+                        <button
+                            type="button"
+                            x-on:click="theme = 'dark'"
+                            x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'dark' }"
+                            class="p-2 rounded-md transition-all"
+                            aria-label="Dark mode"
+                        >
+                            <x-tabler-moon class="size-4" />
+                        </button>
+
+                        <button
+                            type="button"
+                            x-on:click="theme = 'system'"
+                            x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'system' }"
+                            class="p-2 rounded-md transition-all"
+                            aria-label="System theme"
+                        >
+                            <x-tabler-device-desktop class="size-4" />
+                        </button>
+                    </div>
+
                     <x-filament::button
                         href="{{ url('/admin') }}"
                         tag="a"