diff --git a/frontend/src/lib/components/HubBar.svelte b/frontend/src/lib/components/HubBar.svelte
index 1724b0c..b579a83 100644
--- a/frontend/src/lib/components/HubBar.svelte
+++ b/frontend/src/lib/components/HubBar.svelte
@@ -2,7 +2,9 @@
   // Shared editorial top bar for the hub (/home3) and its detail pages (/word, /quote,
   // /onthisday). Full horizontal nav on wide screens; a hamburger + drop panel on phones
   // so the bar stays clean. `active` highlights the current section.
-  let { active = '' } = $props();
+  // `newsHref` is configurable so the transitional /news instance links News → /news
+  // (not the current `/`, which is still the live feed until cutover).
+  let { active = '', newsHref = '/' } = $props();
   let open = $state(false);
 
   // Close the menu when we cross into desktop width, so it can't linger open and reappear
@@ -14,12 +16,12 @@
     return () => mq.removeEventListener('change', sync);
   });
 
-  const LINKS = [
+  let LINKS = $derived([
     { key: 'home', href: '/home3', label: 'Home' },
-    { key: 'news', href: '/', label: 'News' },
+    { key: 'news', href: newsHref, label: 'News' },
     { key: 'games', href: '/play', label: 'Games' },
     { key: 'art', href: '/art', label: 'Art' },
-  ];
+  ]);
 </script>
 
 <svelte:window on:keydown={(e) => { if (e.key === 'Escape') open = false; }} />
diff --git a/frontend/src/lib/components/NewsFeed.svelte b/frontend/src/lib/components/NewsFeed.svelte
index d271dbd..f48c8bd 100644
--- a/frontend/src/lib/components/NewsFeed.svelte
+++ b/frontend/src/lib/components/NewsFeed.svelte
@@ -5,6 +5,7 @@
   import { getJSON, postJSON } from '$lib/api.js';
   import * as P from '$lib/prefs.js';
   import Header from '$lib/components/Header.svelte';
+  import HubBar from '$lib/components/HubBar.svelte';
   import BottomNav from '$lib/components/BottomNav.svelte';
   import MoodNav from '$lib/components/MoodNav.svelte';
   import LanePicker from '$lib/components/LanePicker.svelte';
@@ -19,6 +20,11 @@
   import { ritualState, markBriefSeen } from '$lib/ritual.js';
   import { feedBase, parseView, viewUrl } from '$lib/feednav.js';
 
+  // Which top bar to wear: 'legacy' = the feed's own Header (the interim `/` mount, kept
+  // unchanged), 'hub' = the shared editorial HubBar (the /news mount, part of the new family).
+  // Explicit prop, never inferred from the path.
+  let { chrome = 'legacy' } = $props();
+
   let moods = $state([]);
   let topics = $state([]);
   let families = $state([]);
@@ -626,7 +632,11 @@
   });
 </script>
 
-<Header onSaved={() => (showSaved = true)} onaccount={openAccount} user={auth.user} boundariesActive={filtersOn} />
+{#if chrome === 'hub'}
+  <HubBar active="news" newsHref="/news" />
+{:else}
+  <Header onSaved={() => (showSaved = true)} onaccount={openAccount} user={auth.user} boundariesActive={filtersOn} />
+{/if}
 
 {#if showSignIn}<SignIn onclose={() => { showSignIn = false; if (!auth.user) pendingDigestOptIn = false; }} />{/if}
 {#if showSaved && auth.user}<SavedFlyout onclose={() => (showSaved = false)} />{/if}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 4a63172..a887db7 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -5,4 +5,4 @@
   import NewsFeed from '$lib/components/NewsFeed.svelte';
 </script>
 
-<NewsFeed />
+<NewsFeed chrome="legacy" />
diff --git a/frontend/src/routes/news/+page.svelte b/frontend/src/routes/news/+page.svelte
index 556224b..5d53887 100644
--- a/frontend/src/routes/news/+page.svelte
+++ b/frontend/src/routes/news/+page.svelte
@@ -9,4 +9,4 @@
   <meta name="robots" content="noindex, follow" />
 </svelte:head>
 
-<NewsFeed />
+<NewsFeed chrome="hub" />