diff --git a/src/lib/components/ZonePicker.svelte b/src/lib/components/ZonePicker.svelte
new file mode 100644
index 0000000..551ae6d
--- /dev/null
+++ b/src/lib/components/ZonePicker.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { getPreferences, updatePreferences } from '$lib/stores/preferences.svelte.js';
+
+  const prefs = getPreferences();
+
+  const zones = [
+    { id: 'default', label: 'Default', swatch: 'bg-bg' },
+    { id: 'cave', label: 'Cave', description: 'Cool, focused', swatch: 'bg-[#141a1e]' },
+    { id: 'energy', label: 'Energy', description: 'Warm, active', swatch: 'bg-[#1c1815]' },
+    { id: 'reset', label: 'Reset', description: 'Natural, calm', swatch: 'bg-[#161a16]' },
+  ];
+
+  function selectZone(id) {
+    updatePreferences({ zone: id });
+  }
+</script>
+
+<div class="flex flex-col gap-2">
+  <p class="text-[12px] text-text-secondary font-medium">Sensory zone</p>
+  <div class="grid grid-cols-4 gap-2">
+    {#each zones as zone}
+      <button
+        class="flex flex-col items-center gap-1.5 p-3 rounded-xl border
+          {prefs.zone === zone.id || (zone.id === 'default' && !prefs.zone)
+            ? 'border-accent bg-accent-subtle'
+            : 'border-border-subtle hover:border-border'}"
+        style="transition-duration: var(--duration-ui)"
+        onclick={() => selectZone(zone.id)}
+        aria-pressed={prefs.zone === zone.id || (zone.id === 'default' && !prefs.zone)}
+      >
+        <div class="w-8 h-8 rounded-lg {zone.swatch} border border-border-subtle"></div>
+        <span class="text-[11px] text-text-secondary">{zone.label}</span>
+      </button>
+    {/each}
+  </div>
+</div>