diff --git a/frontend/src/routes/(root)/+layout.svelte b/frontend/src/routes/(root)/+layout.svelte
index 6e7a831..dd34fd2 100644
--- a/frontend/src/routes/(root)/+layout.svelte
+++ b/frontend/src/routes/(root)/+layout.svelte
@@ -11,9 +11,7 @@
 	import { setThemeState } from '$lib/theme/theme.svelte';
 	import type { ThemeConfig } from '$lib/theme/presets';
 
-	import { ModeWatcher } from 'mode-watcher';
 	import { untrack, type Snippet } from 'svelte';
-	import { Toaster } from 'svelte-sonner';
 
 	let {
 		data,
@@ -40,8 +38,6 @@
 	});
 </script>
 
-<Toaster />
-<ModeWatcher />
 
 <div class="[--header-height:calc(--spacing(14))]">
 	<Sidebar.Provider class="flex flex-col">
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 1cbf3fe..4e5d13d 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import { ModeWatcher } from 'mode-watcher';
+	import { Toaster } from 'svelte-sonner';
 
 	let { children } = $props();
 </script>
@@ -9,6 +11,14 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+<!--
+	Mounted here rather than per layout: the reader and login use +layout@ to
+	break out of (root), so anything mounted there never reaches them. The theme
+	toggle in the reader did nothing because ModeWatcher was not running.
+-->
+<Toaster />
+<ModeWatcher />
+
 <div class="flex h-screen min-h-screen flex-col">
 	<!-- Main Content Area -->
 	<main class="flex-1">
diff --git a/frontend/src/routes/login/+layout@.svelte b/frontend/src/routes/login/+layout@.svelte
index 376b8d7..5d2becf 100644
--- a/frontend/src/routes/login/+layout@.svelte
+++ b/frontend/src/routes/login/+layout@.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import '../../app.css';
 	import favicon from '$lib/assets/favicon.svg';
-	import { Toaster } from 'svelte-sonner';
-	import { ModeWatcher } from 'mode-watcher';
 	import ThemeToggle from '$lib/components/layout/theme-toggle.svelte';
 
 	let { children } = $props();
@@ -12,8 +10,6 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-<Toaster />
-<ModeWatcher />
 
 <div class="flex h-screen min-h-screen flex-col">
 	<!-- Header -->