diff --git a/frontend/src/lib/utils/pwa.ts b/frontend/src/lib/utils/pwa.ts
index 951ca05..fcedfda 100644
--- a/frontend/src/lib/utils/pwa.ts
+++ b/frontend/src/lib/utils/pwa.ts
@@ -11,4 +11,7 @@ export async function resetPwa(): Promise<void> {
 		const keys = await caches.keys();
 		await Promise.all(keys.map((k) => caches.delete(k)));
 	}
+	// Hard reload so the page (and a fresh service worker, if still installed)
+	// re-fetches everything from the network instead of the now-cleared cache.
+	location.reload();
 }
\ No newline at end of file
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 9bedbe0..243a319 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -85,16 +85,15 @@
 	});
 
 	// ---- PWA reset ----
+	// doPwaReset() clears the caches/SW and then hard-reloads the page, so there's
+	// no post-success state to surface here — just keep the button disabled while it
+	// runs until the reload takes over.
 	let pwaResetting = $state(false);
-	let pwaSuccess = $state(false);
 
 	async function resetPwa() {
 		pwaResetting = true;
-		pwaSuccess = false;
 		try {
 			await doPwaReset();
-			pwaSuccess = true;
-			setTimeout(() => (pwaSuccess = false), 3000);
 		} finally {
 			pwaResetting = false;
 		}
@@ -226,10 +225,7 @@
 	<!-- ====== PWA ====== -->
 	<section class="card">
 		<h2 class="section-title">App cache</h2>
-		<p class="hint-text">Clear service worker and cached assets. Useful if the app feels stale after an update.</p>
-		{#if pwaSuccess}
-			<p class="msg success" role="status">Cache cleared. Reload the page to fetch fresh assets.</p>
-		{/if}
+		<p class="hint-text">Clear service worker and cached assets, then reload. Useful if the app feels stale after an update.</p>
 		<div class="row-actions">
 			<button class="btn danger-outline" onclick={resetPwa} disabled={pwaResetting}>
 				{pwaResetting ? 'Clearing…' : 'Clear PWA cache'}
diff --git a/frontend/src/service-worker.ts b/frontend/src/service-worker.ts
index 761104b..20af3bb 100644
--- a/frontend/src/service-worker.ts
+++ b/frontend/src/service-worker.ts
@@ -8,8 +8,11 @@ declare const self: ServiceWorkerGlobalScope;
 // Cache name is versioned so a new deploy invalidates the old shell.
 const CACHE = `app-shell-${version}`;
 
-// App shell: all Vite-emitted JS/CSS chunks + static assets (fonts, icons, manifest).
-const SHELL = [...build, ...files];
+// App shell: the SPA entry HTML ('/'), all Vite-emitted JS/CSS chunks, and the
+// static assets (fonts, icons, manifest). Pre-caching '/' makes the shell — and
+// therefore the whole offline fallback below — available from the very first
+// visit, before any navigation has been seen by the runtime cache.
+const SHELL = ['/', ...build, ...files];
 
 // ---- Install: pre-cache the app shell ----
 self.addEventListener('install', (event) => {