diff --git a/src/App.vue b/src/App.vue
index 7c730f4..64aee0b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,11 +4,13 @@ import { useAuthStore } from '@/stores/auth'
 import { useProjectsStore } from '@/stores/projects'
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
 import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
 import AppSidebar from '@/components/AppSidebar.vue'
 import LoginView from '@/views/LoginView.vue'
 import DashboardView from '@/views/DashboardView.vue'
 import CalendarView from '@/views/CalendarView.vue'
 import SchedulerView from '@/views/SchedulerView.vue'
+import { isDark, toggleTheme } from '@/composables/useTheme'
 
 const auth = useAuthStore()
 const projectsStore = useProjectsStore()
@@ -48,6 +50,23 @@ onMounted(() => {
           <h1 class="text-base font-medium">
             {{ tabTitles[activeTab] }}
           </h1>
+          <div class="ml-auto flex items-center gap-2">
+            <Button variant="ghost" size="icon" class="size-8" @click="toggleTheme()">
+              <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-[18px]">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                <path d="M12 3l0 18" />
+                <path d="M12 9l4.65 -4.65" />
+                <path d="M12 14.3l7.37 -7.37" />
+                <path d="M12 19.6l8.85 -8.85" />
+              </svg>
+              <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-[18px]">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
+              </svg>
+              <span class="sr-only">Toggle theme</span>
+            </Button>
+          </div>
         </div>
       </header>
 
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
new file mode 100644
index 0000000..aa94a08
--- /dev/null
+++ b/src/composables/useTheme.ts
@@ -0,0 +1,11 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark({
+  selector: 'html',
+  attribute: 'class',
+  valueDark: 'dark',
+  valueLight: 'light',
+  storageKey: 'alpha-theme',
+})
+
+export const toggleTheme = useToggle(isDark)