diff --git a/src/routes/(app)/settings/preferences/+page.svelte b/src/routes/(app)/settings/preferences/+page.svelte
index fe755ef..be5f992 100644
--- a/src/routes/(app)/settings/preferences/+page.svelte
+++ b/src/routes/(app)/settings/preferences/+page.svelte
@@ -9,6 +9,22 @@
 <div class="space-y-8">
 	<h2 class="text-xl font-bold text-[var(--text)]">Preferences</h2>
 
+	<!-- Theme -->
+	<div class="space-y-2">
+		<span class="block text-sm font-medium text-[var(--text)]">Theme</span>
+		<div class="flex gap-1" role="group" aria-label="Theme">
+			{#each [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']] as [value, label]}
+				<button
+					onclick={() => updatePreference('theme', value)}
+					class="rounded-sm border px-4 py-2 text-sm transition-colors {prefs.theme === value ? 'border-[var(--primary)] bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'border-[var(--border-subtle)] text-[var(--text)] hover:border-[var(--primary)]'}"
+					data-testid="pref-theme-{value}"
+				>
+					{label}
+				</button>
+			{/each}
+		</div>
+	</div>
+
 	<!-- Default note mode -->
 	<div class="space-y-2">
 		<span class="block text-sm font-medium text-[var(--text)]">Default note mode</span>