diff --git a/web/NavPanel.tsx b/web/NavPanel.tsx
index 2babaa2..528a0c7 100644
--- a/web/NavPanel.tsx
+++ b/web/NavPanel.tsx
@@ -6,6 +6,7 @@ import { SECTIONS, sectionOpen } from './sections';
 import { href, useNav } from './routes';
 import { useReady } from './useReady';
 import { pageParam, usePages, type Page } from './usePages';
+import { useFofosChanged } from './channel';
 
 /**
  * The left column: which part of the fofos site the detail panel is showing.
@@ -91,11 +92,15 @@ export const NavPanel = () => {
     The write happens once, at the end: `PUT /pages/order` takes the whole set, because an order is a
     property of the SET and sending one row's new index leaves the server guessing about everyone else.
   */
+  const [, bump] = useFofosChanged();
   const [dragged, setDragged] = useState<number | null>(null);
   const orderedRef = useRef<Page[] | null>(null);
 
   const moveOver = (event: React.DragEvent, overId: number) => {
     if (dragged === null || !pages) return;
+    // Home is first and stays first — see the note on its missing grip. Refusing the drop here is what
+    // stops anything being dragged ABOVE it, which no amount of hiding the handle would prevent.
+    if (pages.find((page) => page.id === overId)?.is_home) return;
     // Without this the drop is refused and the browser animates the row back to where it started.
     event.preventDefault();
     if (dragged === overId) return;
@@ -119,6 +124,8 @@ export const NavPanel = () => {
 
     void clientRef.current
       .put('/fofos-admin/pages/order', { ids: ordered.map((page) => page.id) })
+      // The menu is the site's, so every preview on the screen is now showing the old one.
+      .then(() => bump())
       // The list is already showing the new order; a failure has to put the old one back, and the
       // server is the only thing that knows what that was.
       .catch(() => void clientRef.current.get<{ data: Page[] }>('/fofos-admin/pages').then((body) => announce(body.data)));
@@ -210,6 +217,16 @@ export const NavPanel = () => {
                 current ? 'bg-muted' : 'hover:bg-muted/50'
               } ${dragged === page.id ? 'opacity-40' : ''}`}
             >
+              {/*
+                Home has no grip.
+
+                It is the site's front door and its address is `/`; a menu that opens somewhere else
+                is not a menu with a different order, it is a different site. The space is kept so the
+                titles still line up — an unindented Home would read as a heading rather than a row.
+              */}
+              {page.is_home ? (
+                <span className="w-6 shrink-0" aria-hidden />
+              ) : (
               <span
                 draggable
                 onDragStart={(event) => {
@@ -224,6 +241,7 @@ export const NavPanel = () => {
               >
                 <GripVertical className="size-3.5" />
               </span>
+              )}
 
               <Link
                 to={href('pages', pageParam(page))}
diff --git a/web/SitePreview.tsx b/web/SitePreview.tsx
index ff9dcb8..51880a4 100644
--- a/web/SitePreview.tsx
+++ b/web/SitePreview.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useClient } from 'hooks/useClient';
 import { readableError } from './errors';
 import { DEVICES, usePreviewable, useViewMode } from './ViewMode';
+import { useFofosChanged } from './channel';
 
 /**
  * A page of the real site, embedded.
@@ -209,9 +210,21 @@ export const SitePreview = ({
     The lesson is the same one as `useClient` two files along: a value rebuilt every render must not be
     the thing something else keys on.
   */
+  /*
+    A change anywhere on the site reloads every preview of it.
+
+    `reloadToken` is the panel's own — the page builder bumps it after its own writes. This is the
+    other half: something ELSE changed the site, and a frame showing the old one is a frame lying. The
+    nav reordering the menu is the case that made it necessary; the Layout preview draws that menu and
+    had no token at all.
+
+    Its purpose is exactly this — "anyone reading it should read it again" — and a preview is a reader.
+  */
+  const [changed] = useFofosChanged();
+
   useEffect(() => {
     setLoaded(0);
-  }, [reloadToken]);
+  }, [reloadToken, changed]);
 
   useEffect(() => {
     if (!loaded) return;
@@ -334,7 +347,7 @@ export const SitePreview = ({
             <iframe
               // The key is what makes `reloadToken` reload: a new key is a new element, so the browser
               // fetches the document again and `onLoad` runs, which re-injects the builder's chrome.
-              key={reloadToken ?? 0}
+              key={`${reloadToken ?? 0}:${changed}`}
               ref={frame}
               // Applied on load as well as on change: the document is replaced on a reload, and the
               // properties go with it.