diff --git a/src/routes/float/+layout@.svelte b/src/routes/float/+layout@.svelte
index e30a3e6..55d0152 100644
--- a/src/routes/float/+layout@.svelte
+++ b/src/routes/float/+layout@.svelte
@@ -4,29 +4,22 @@
   import { listen } from "@tauri-apps/api/event";
   import { getCurrentWindow } from "@tauri-apps/api/window";
   import { settings } from "$lib/stores/page.svelte.js";
+  import { getPreferences, updatePreferences } from "$lib/stores/preferences.svelte.js";
+  import Titlebar from "$lib/components/Titlebar.svelte";
 
   let { children } = $props();
   let glowing = $state(false);
   let unlistenFocus = null;
-  let quickAddEl = $state(null);
 
-  // Theme application (float window has its own DOM)
+  const prefs = getPreferences();
+
+  // Theme — sync legacy settings to preferences store (same as main layout)
   $effect(() => {
-    const theme = settings.theme;
-    if (theme === "Light") {
-      document.documentElement.classList.add("light");
-      return;
+    const legacyTheme = settings.theme;
+    const mapped = legacyTheme === "Light" ? "light" : legacyTheme === "Dark" ? "dark" : "system";
+    if (prefs.theme !== mapped) {
+      updatePreferences({ theme: mapped });
     }
-    if (theme === "Dark") {
-      document.documentElement.classList.remove("light");
-      return;
-    }
-    // System mode
-    const mq = window.matchMedia("(prefers-color-scheme: light)");
-    const apply = () => document.documentElement.classList.toggle("light", mq.matches);
-    apply();
-    mq.addEventListener("change", apply);
-    return () => mq.removeEventListener("change", apply);
   });
 
   // Listen for settings changes from main window
@@ -67,5 +60,6 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="h-screen w-screen overflow-hidden grain rounded-lg border border-border shadow-xl animate-float-enter {glowing ? 'animate-glow-pulse' : ''}">
+  <Titlebar compact />
   {@render children()}
 </div>
diff --git a/src/routes/viewer/+layout@.svelte b/src/routes/viewer/+layout@.svelte
index 460d9d8..7f565f1 100644
--- a/src/routes/viewer/+layout@.svelte
+++ b/src/routes/viewer/+layout@.svelte
@@ -1,27 +1,22 @@
 <script>
   import "../../app.css";
-  import { onMount, onDestroy } from "svelte";
+  import { onDestroy } from "svelte";
   import { getCurrentWindow } from "@tauri-apps/api/window";
   import { settings } from "$lib/stores/page.svelte.js";
+  import { getPreferences, updatePreferences } from "$lib/stores/preferences.svelte.js";
+  import Titlebar from "$lib/components/Titlebar.svelte";
 
   let { children } = $props();
 
-  // Theme application (viewer window has its own DOM)
+  const prefs = getPreferences();
+
+  // Theme — sync legacy settings to preferences store
   $effect(() => {
-    const theme = settings.theme;
-    if (theme === "Light") {
-      document.documentElement.classList.add("light");
-      return;
+    const legacyTheme = settings.theme;
+    const mapped = legacyTheme === "Light" ? "light" : legacyTheme === "Dark" ? "dark" : "system";
+    if (prefs.theme !== mapped) {
+      updatePreferences({ theme: mapped });
     }
-    if (theme === "Dark") {
-      document.documentElement.classList.remove("light");
-      return;
-    }
-    const mq = window.matchMedia("(prefers-color-scheme: light)");
-    const apply = () => document.documentElement.classList.toggle("light", mq.matches);
-    apply();
-    mq.addEventListener("change", apply);
-    return () => mq.removeEventListener("change", apply);
   });
 
   // Sync settings from main window
@@ -44,5 +39,6 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="h-screen w-screen overflow-hidden grain rounded-lg border border-border shadow-xl animate-float-enter">
+  <Titlebar compact />
   {@render children()}
 </div>