diff --git a/README.md b/README.md
index 3cded8b..d361d95 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Kalender nie.
 - 🔗 **Öffentliche Buchungsseite** (`/b/<slug>`): freie Slots im von dir definierten Zeitfenster, Wochentage, Slot-Raster und Dauern – **niemals Termindetails**
 - 📨 **Buchungsanfragen** annehmen/ablehnen; angenommene Zeiten werden belegt und verhindern Doppelbuchungen
 - ⚙️ Buchungsregeln: Zeitfenster, Slot-Raster (10–60 Min), Dauern, Wochentage, Horizont (1–120 Tage), Zeitzone
-- 🧊 **Liquid-Glass-Dark-UI** (Glassmorphism, animierte Orbs), komplett auf Deutsch
+- 🧊 **Liquid-Glass-UI** mit **Dark-/Light-Mode**: Umschalter (Auto / Dunkel / Hell) auf jeder Seite, automatische Systemerkennung (`prefers-color-scheme`) inkl. Live-Wechsel, Auswahl wird pro Browser gespeichert
 - 🔒 Provider-Tokens werden **AES-256-GCM-verschlüsselt** in der SQLite-DB gespeichert
 
 ## Tech Stack
diff --git a/frontend/index.html b/frontend/index.html
index 6727ee7..6be70bb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,20 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#05070c" />
+    <script>
+      // Design vor dem ersten Render anwenden (verhindert Flash beim Laden)
+      ;(function () {
+        try {
+          var m = localStorage.getItem('wannpassts_theme')
+          var dark =
+            m === 'dark' ||
+            ((m === null || m === 'auto') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+          var t = dark ? 'dark' : 'light'
+          document.documentElement.dataset.theme = t
+          document.documentElement.style.colorScheme = t
+        } catch (e) {}
+      })()
+    </script>
     <meta
       name="description"
       content="WannPassts – Deine freien Zeiten, geteilt per Link. Verbinde Google-, iCloud- und andere Kalender und nimm Buchungsanfragen an, ohne deine Termine preiszugeben."
diff --git a/frontend/src/components/ThemeToggle.vue b/frontend/src/components/ThemeToggle.vue
new file mode 100644
index 0000000..e99b721
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useTheme } from '../lib/theme'
+
+const { mode, labels, cycle } = useTheme()
+const icons = { auto: '🌗', dark: '🌙', light: '☀️' } as const
+</script>
+
+<template>
+  <button
+    class="btn btn-sm theme-toggle"
+    type="button"
+    :title="`Design: ${labels[mode]} – klicken zum Wechseln`"
+    :aria-label="`Design umschalten, aktuell ${labels[mode]}`"
+    @click="cycle"
+  >
+    <span aria-hidden="true">{{ icons[mode] }}</span>
+    <span class="tlabel">{{ labels[mode] }}</span>
+  </button>
+</template>
+
+<style scoped>
+.tlabel {
+  margin-left: 7px;
+}
+@media (max-width: 600px) {
+  .tlabel {
+    display: none;
+  }
+}
+</style>
diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts
new file mode 100644
index 0000000..785fad7
--- /dev/null
+++ b/frontend/src/lib/theme.ts
@@ -0,0 +1,72 @@
+import { ref } from 'vue'
+
+export type ThemeMode = 'auto' | 'dark' | 'light'
+
+const STORAGE_KEY = 'wannpassts_theme'
+
+export const themeLabels: Record<ThemeMode, string> = {
+  auto: 'Auto',
+  dark: 'Dunkel',
+  light: 'Hell',
+}
+
+function storedMode(): ThemeMode {
+  try {
+    const v = localStorage.getItem(STORAGE_KEY)
+    if (v === 'dark' || v === 'light' || v === 'auto') return v
+  } catch {
+    /* localStorage nicht verfügbar */
+  }
+  return 'auto'
+}
+
+const mode = ref<ThemeMode>(storedMode())
+const media = window.matchMedia('(prefers-color-scheme: dark)')
+
+/** Tatsächlich aktives Design: bei "auto" aus der Systemeinstellung abgeleitet. */
+export function resolvedTheme(): 'dark' | 'light' {
+  if (mode.value === 'auto') return media.matches ? 'dark' : 'light'
+  return mode.value
+}
+
+export function applyTheme() {
+  const t = resolvedTheme()
+  const root = document.documentElement
+  root.dataset.theme = t
+  root.style.colorScheme = t
+  document
+    .querySelector('meta[name="theme-color"]')
+    ?.setAttribute('content', t === 'dark' ? '#05070c' : '#eef1f7')
+}
+
+let watcherInstalled = false
+
+/** Beim App-Start aufrufen (inline-Script in index.html verhindert den Flash davor). */
+export function initTheme() {
+  applyTheme()
+  if (!watcherInstalled) {
+    watcherInstalled = true
+    // Wechselt das Betriebssystem das Design, folgt WannPassts im Auto-Modus sofort.
+    media.addEventListener('change', () => {
+      if (mode.value === 'auto') applyTheme()
+    })
+  }
+}
+
+export function useTheme() {
+  function setMode(m: ThemeMode) {
+    mode.value = m
+    try {
+      localStorage.setItem(STORAGE_KEY, m)
+    } catch {
+      /* ignore */
+    }
+    applyTheme()
+  }
+
+  function cycle() {
+    setMode(mode.value === 'auto' ? 'dark' : mode.value === 'dark' ? 'light' : 'auto')
+  }
+
+  return { mode, labels: themeLabels, setMode, cycle, resolvedTheme }
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 1c85907..267915b 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -2,8 +2,11 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
+import { initTheme } from './lib/theme'
 import './styles/main.css'
 
+initTheme()
+
 const app = createApp(App)
 app.use(createPinia())
 app.use(router)
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index abff517..b1f03eb 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -1,6 +1,8 @@
-/* ─── WannPassts · Liquid Glass Dark ──────────────────────────────────────── */
+/* ─── WannPassts · Liquid Glass (Dark & Light) ────────────────────────────── */
 
+/* Dunkles Design = Standard */
 :root {
+  color-scheme: dark;
   --bg-0: #05070c;
   --bg-1: #0a0e18;
   --text: #eef1f8;
@@ -8,6 +10,22 @@
   --text-faint: rgba(238, 241, 248, 0.34);
   --border: rgba(255, 255, 255, 0.13);
   --border-soft: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.24);
+  --glass-fill: linear-gradient(150deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
+  --glass-soft-fill: rgba(255, 255, 255, 0.04);
+  --input-bg: rgba(255, 255, 255, 0.05);
+  --input-bg-focus: rgba(255, 255, 255, 0.07);
+  --btn-fill: linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
+  --btn-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+  --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+  --inset-hi: rgba(255, 255, 255, 0.10);
+  --option-bg: #10141f;
+  --tabs-bg: rgba(255, 255, 255, 0.035);
+  --tab-active-fill: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
+  --orb-opacity: 0.45;
+  --glow-a: rgba(125, 176, 255, 0.10);
+  --glow-b: rgba(183, 140, 255, 0.09);
+  --glow-c: rgba(111, 227, 196, 0.06);
   --accent: #7db0ff;
   --accent-2: #b78cff;
   --accent-3: #6fe3c4;
@@ -19,6 +37,39 @@
   --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
+/* Helles Design – aktiv per html[data-theme="light"] (Auto/Dunkel/Hell-Umschalter) */
+html[data-theme='light'] {
+  color-scheme: light;
+  --bg-0: #e7ebf3;
+  --bg-1: #fbfcfe;
+  --text: #171c26;
+  --text-muted: rgba(23, 28, 38, 0.62);
+  --text-faint: rgba(23, 28, 38, 0.40);
+  --border: rgba(24, 34, 64, 0.16);
+  --border-soft: rgba(24, 34, 64, 0.10);
+  --border-strong: rgba(24, 34, 64, 0.30);
+  --glass-fill: linear-gradient(150deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45));
+  --glass-soft-fill: rgba(255, 255, 255, 0.55);
+  --input-bg: rgba(255, 255, 255, 0.65);
+  --input-bg-focus: rgba(255, 255, 255, 0.85);
+  --btn-fill: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
+  --btn-hover-shadow: 0 10px 30px rgba(35, 48, 90, 0.16);
+  --card-shadow: 0 24px 60px rgba(35, 48, 90, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  --inset-hi: rgba(255, 255, 255, 0.65);
+  --option-bg: #ffffff;
+  --tabs-bg: rgba(255, 255, 255, 0.5);
+  --tab-active-fill: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62));
+  --orb-opacity: 0.22;
+  --glow-a: rgba(90, 140, 235, 0.14);
+  --glow-b: rgba(150, 105, 230, 0.12);
+  --glow-c: rgba(80, 200, 170, 0.10);
+  --accent: #3f74d6;
+  --accent-2: #8350d8;
+  --accent-3: #12a179;
+  --danger: #d9374c;
+  --ok: #0c9e63;
+}
+
 * { box-sizing: border-box; }
 
 html, body {
@@ -31,13 +82,14 @@ body {
   font-family: var(--font);
   color: var(--text);
   background:
-    radial-gradient(1200px 800px at 85% -10%, rgba(125, 176, 255, 0.10), transparent 60%),
-    radial-gradient(1000px 700px at -10% 30%, rgba(183, 140, 255, 0.09), transparent 55%),
-    radial-gradient(900px 600px at 50% 110%, rgba(111, 227, 196, 0.06), transparent 60%),
+    radial-gradient(1200px 800px at 85% -10%, var(--glow-a), transparent 60%),
+    radial-gradient(1000px 700px at -10% 30%, var(--glow-b), transparent 55%),
+    radial-gradient(900px 600px at 50% 110%, var(--glow-c), transparent 60%),
     linear-gradient(180deg, var(--bg-1), var(--bg-0));
   background-attachment: fixed;
   -webkit-font-smoothing: antialiased;
   letter-spacing: 0.01em;
+  transition: color 0.2s ease;
 }
 
 #app { min-height: 100vh; }
@@ -48,7 +100,7 @@ body {
   position: absolute;
   border-radius: 50%;
   filter: blur(110px);
-  opacity: 0.45;
+  opacity: var(--orb-opacity);
   animation: orb-drift 26s ease-in-out infinite alternate;
 }
 .orb-1 { width: 46vw; height: 46vw; left: -10vw; top: -14vh; background: radial-gradient(circle, #2b5cc4, transparent 70%); }
@@ -68,16 +120,16 @@ body {
 /* ─── Glass-Bausteine ─────────────────────────────────────────────────────── */
 
 .glass {
-  background: linear-gradient(150deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
+  background: var(--glass-fill);
   backdrop-filter: blur(26px) saturate(170%);
   -webkit-backdrop-filter: blur(26px) saturate(170%);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+  box-shadow: var(--card-shadow);
 }
 
 .glass-soft {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-soft-fill);
   border: 1px solid var(--border-soft);
   border-radius: var(--radius-md);
   backdrop-filter: blur(12px);
@@ -105,7 +157,7 @@ body {
   appearance: none;
   border: 1px solid var(--border);
   border-radius: 999px;
-  background: linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
+  background: var(--btn-fill);
   color: var(--text);
   font: 600 14px/1 var(--font);
   padding: 11px 20px;
@@ -114,7 +166,7 @@ body {
   -webkit-backdrop-filter: blur(14px);
   transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
 }
-.btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.24); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
+.btn:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--btn-hover-shadow); }
 .btn:active { transform: translateY(0); }
 .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
 
@@ -142,7 +194,7 @@ label.field > span { font-size: 13px; color: var(--text-muted); font-weight: 500
 
 .input, select.input, textarea.input {
   width: 100%;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--input-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text);
@@ -154,10 +206,10 @@ label.field > span { font-size: 13px; color: var(--text-muted); font-weight: 500
 .input:focus {
   border-color: rgba(125, 176, 255, 0.65);
   box-shadow: 0 0 0 3px rgba(125, 176, 255, 0.18);
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--input-bg-focus);
 }
 .input::placeholder { color: var(--text-faint); }
-select.input option { background: #10141f; color: var(--text); }
+select.input option { background: var(--option-bg); color: var(--text); }
 textarea.input { resize: vertical; min-height: 84px; }
 
 /* ─── Badges & Chips ──────────────────────────────────────────────────────── */
@@ -171,7 +223,7 @@ textarea.input { resize: vertical; min-height: 84px; }
   padding: 4px 11px;
   border-radius: 999px;
   border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--glass-soft-fill);
   color: var(--text-muted);
 }
 .badge-pending { border-color: rgba(125, 176, 255, 0.45); color: var(--accent); background: rgba(125, 176, 255, 0.10); }
@@ -186,7 +238,7 @@ textarea.input { resize: vertical; min-height: 84px; }
   padding: 6px;
   border-radius: 999px;
   border: 1px solid var(--border-soft);
-  background: rgba(255, 255, 255, 0.035);
+  background: var(--tabs-bg);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   overflow-x: auto;
@@ -209,8 +261,8 @@ textarea.input { resize: vertical; min-height: 84px; }
 .tab:hover { color: var(--text); }
 .tab.active {
   color: var(--text);
-  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.3);
+  background: var(--tab-active-fill);
+  box-shadow: inset 0 1px 0 var(--inset-hi), 0 6px 18px rgba(0, 0, 0, 0.12);
 }
 
 /* ─── Toasts ──────────────────────────────────────────────────────────────── */
@@ -247,7 +299,7 @@ textarea.input { resize: vertical; min-height: 84px; }
   appearance: none;
   border: 1px solid var(--border-soft);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-soft-fill);
   color: var(--text-muted);
   font: 600 14px/1 var(--font);
   padding: 12px 0;
@@ -282,7 +334,7 @@ textarea.input { resize: vertical; min-height: 84px; }
   min-width: 74px;
   border: 1px solid var(--border-soft);
   border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-soft-fill);
   color: var(--text-muted);
   font-family: var(--font);
   padding: 10px 8px;
@@ -298,7 +350,7 @@ textarea.input { resize: vertical; min-height: 84px; }
   color: var(--text);
   border-color: rgba(125, 176, 255, 0.55);
   background: linear-gradient(150deg, rgba(125, 176, 255, 0.16), rgba(183, 140, 255, 0.10));
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 1px 0 var(--inset-hi), 0 8px 24px rgba(0, 0, 0, 0.12);
 }
 .day-chip .wd { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
 .day-chip .dom { font-size: 20px; font-weight: 700; color: inherit; }
@@ -310,7 +362,7 @@ textarea.input { resize: vertical; min-height: 84px; }
 
 .skeleton {
   border-radius: var(--radius-md);
-  background: linear-gradient(100deg, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 60%);
+  background: linear-gradient(100deg, rgba(140, 150, 170, 0.10) 40%, rgba(140, 150, 170, 0.22) 50%, rgba(140, 150, 170, 0.10) 60%);
   background-size: 200% 100%;
   animation: shimmer 1.4s infinite;
 }
diff --git a/frontend/src/views/BookingView.vue b/frontend/src/views/BookingView.vue
index 45db4c2..d697e8f 100644
--- a/frontend/src/views/BookingView.vue
+++ b/frontend/src/views/BookingView.vue
@@ -6,6 +6,7 @@ import type { PublicInfo } from '../lib/types'
 import { useToast } from '../stores/toast'
 import { formatTime, partsInTz, zonedToUtc } from '../lib/tz'
 import LogoMark from '../components/LogoMark.vue'
+import ThemeToggle from '../components/ThemeToggle.vue'
 
 const route = useRoute()
 const toast = useToast()
@@ -183,9 +184,12 @@ onMounted(async () => {
             </p>
           </div>
         </div>
-        <div class="legend small">
-          <span class="dot ok"></span> frei &amp; buchbar
-          <span class="dot busy"></span> belegt
+        <div class="row legend-row">
+          <div class="legend small">
+            <span class="dot ok"></span> frei &amp; buchbar
+            <span class="dot busy"></span> belegt
+          </div>
+          <ThemeToggle />
         </div>
       </header>
 
@@ -297,6 +301,7 @@ onMounted(async () => {
 .head { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
 .head h1 { margin: 0; font-size: 22px; }
 .legend { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
+.legend-row { justify-content: space-between; flex-wrap: wrap; }
 .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
 .dot.ok { background: var(--ok); box-shadow: 0 0 10px rgba(70, 224, 165, 0.7); }
 .dot.busy { background: var(--danger); box-shadow: 0 0 10px rgba(255, 122, 138, 0.6); }
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 2bef300..46df0f7 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useAuth } from '../stores/auth'
 import { useToast } from '../stores/toast'
 import LogoMark from '../components/LogoMark.vue'
+import ThemeToggle from '../components/ThemeToggle.vue'
 import ShareLinkCard from '../components/ShareLinkCard.vue'
 import SectionConnections from '../components/SectionConnections.vue'
 import SectionRequests from '../components/SectionRequests.vue'
@@ -62,6 +63,7 @@ function logout() {
       </div>
       <div class="row">
         <span class="muted small hide-sm">{{ auth.user.email }}</span>
+        <ThemeToggle />
         <button class="btn btn-sm" @click="logout">Abmelden</button>
       </div>
     </header>
@@ -142,7 +144,7 @@ function logout() {
   transition: transform 0.15s ease, border-color 0.15s ease;
   cursor: pointer;
 }
-.tile:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.24); }
+.tile:hover { transform: translateY(-2px); border-color: var(--border-strong); }
 .tile-icon { font-size: 26px; }
 .privacy { padding: 20px 24px; }
 @media (max-width: 520px) { .hide-sm { display: none; } }
diff --git a/frontend/src/views/LandingView.vue b/frontend/src/views/LandingView.vue
index 4f87c9c..0bac6a0 100644
--- a/frontend/src/views/LandingView.vue
+++ b/frontend/src/views/LandingView.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import LogoMark from '../components/LogoMark.vue'
 import GlassCard from '../components/GlassCard.vue'
+import ThemeToggle from '../components/ThemeToggle.vue'
 </script>
 
 <template>
   <main class="page landing">
     <section class="hero glass">
       <div class="hero-glow" aria-hidden="true"></div>
+      <ThemeToggle class="hero-toggle" />
       <LogoMark />
       <h1>Wann<span class="grad">Passts</span></h1>
       <p class="tagline">
@@ -70,6 +72,11 @@ import GlassCard from '../components/GlassCard.vue'
   background: radial-gradient(600px 300px at 50% 0%, rgba(125, 176, 255, 0.16), transparent 70%);
   pointer-events: none;
 }
+.hero-toggle {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
 h1 {
   margin: 6px 0 0;
   font-size: clamp(40px, 7vw, 64px);
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 3e32572..f7d4f35 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -5,6 +5,7 @@ import { ApiError } from '../lib/api'
 import { useAuth } from '../stores/auth'
 import { useToast } from '../stores/toast'
 import LogoMark from '../components/LogoMark.vue'
+import ThemeToggle from '../components/ThemeToggle.vue'
 
 const auth = useAuth()
 const toast = useToast()
@@ -31,6 +32,7 @@ async function submit() {
 
 <template>
   <main class="page auth">
+    <ThemeToggle class="corner-toggle" />
     <form class="glass card" @submit.prevent="submit">
       <div class="row" style="justify-content: center">
         <LogoMark />
@@ -77,6 +79,7 @@ async function submit() {
 .card p { margin: 0; }
 h1 { margin: 4px 0 0; font-size: 24px; text-align: center; }
 .center { text-align: center; }
+.corner-toggle { position: fixed; top: 16px; right: 16px; z-index: 40; }
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 </style>
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index eb64016..912ac7b 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/frontend/src/views/RegisterView.vue
@@ -6,6 +6,7 @@ import { useAuth } from '../stores/auth'
 import { useToast } from '../stores/toast'
 import { guessTimezone } from '../lib/tz'
 import LogoMark from '../components/LogoMark.vue'
+import ThemeToggle from '../components/ThemeToggle.vue'
 
 const auth = useAuth()
 const toast = useToast()
@@ -36,6 +37,7 @@ async function submit() {
 
 <template>
   <main class="page auth">
+    <ThemeToggle class="corner-toggle" />
     <form class="glass card" @submit.prevent="submit">
       <div class="row" style="justify-content: center">
         <LogoMark />
@@ -85,6 +87,7 @@ async function submit() {
 .card p { margin: 0; }
 h1 { margin: 4px 0 0; font-size: 24px; text-align: center; }
 .center { text-align: center; }
+.corner-toggle { position: fixed; top: 16px; right: 16px; z-index: 40; }
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 </style>