diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 7a4e65b2..9ea00a2c 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,5 +1,31 @@
 <script lang="ts">
   import '../app.css';
+  import { page } from '$app/state';
+  import { goto } from '$app/navigation';
+  import { QueryClientProvider } from '@tanstack/svelte-query';
+  import { queryClient } from '$lib/query/client';
+  import { user } from '$lib/auth/store.svelte';
+  import Shell from '$lib/components/Shell.svelte';
+
+  let { children } = $props<{ children: import('svelte').Snippet }>();
+
+  // Reactive guard: runs every time page.url or user.value changes.
+  $effect(() => {
+    const path = page.url.pathname;
+    const isLogin = path === '/login';
+    if (user.value === null && !isLogin) {
+      const returnTo = path + page.url.search;
+      goto('/login?returnTo=' + encodeURIComponent(returnTo), { replaceState: true });
+    } else if (user.value !== null && isLogin) {
+      goto('/', { replaceState: true });
+    }
+  });
 </script>
 
-<slot />
+<QueryClientProvider client={queryClient}>
+  {#if user.value !== null && page.url.pathname !== '/login'}
+    <Shell>{@render children()}</Shell>
+  {:else}
+    {@render children()}
+  {/if}
+</QueryClientProvider>
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
new file mode 100644
index 00000000..ea7719a7
--- /dev/null
+++ b/web/src/routes/+layout.ts
@@ -0,0 +1,10 @@
+import type { LayoutLoad } from './$types';
+import { bootstrap } from '$lib/auth/store.svelte';
+
+export const ssr = false; // adapter-static fallback; we're SPA-only
+export const prerender = false;
+
+export const load: LayoutLoad = async () => {
+  await bootstrap();
+  return {};
+};