@@ -1,38 +1,49 @@
-import { OctagonAlertIcon } from "lucide-react";
+import { Settings2Icon } from "lucide-react";
 import type { ReactNode } from "react";
 
 import {
   ensureClientSettingsHydrated,
   useClientSettingsHydrationStatus,
 } from "../hooks/useSettings";
 import { Button } from "./ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "./ui/empty";
 import { RefreshIcon } from "./ui/refresh-icon";
-import { StandalonePage, StandalonePageIcon } from "./ui/standalone-page";
+import { StandalonePage } from "./ui/standalone-page";
 
 /** Edits made on defaults after a failed read are never saved, so the app waits for a good read. */
 export function ClientSettingsRecoveryGate({ children }: { readonly children: ReactNode }) {
   const status = useClientSettingsHydrationStatus();
   if (status !== "failed" && status !== "retrying") return children;
   const retrying = status === "retrying";
   return (
-    <StandalonePage size="card">
-      <div className="flex items-center gap-3">
-        <StandalonePageIcon tone="error">
-          <OctagonAlertIcon />
-        </StandalonePageIcon>
-        <h1 className="min-w-0 flex-1 text-label text-strong-foreground">
-          Couldn't load your settings
-        </h1>
-        <Button
-          size="standard"
-          variant="secondary"
-          disabled={retrying}
-          onClick={() => void ensureClientSettingsHydrated().catch(() => undefined)}
-        >
-          <RefreshIcon refreshing={retrying} />
-          Retry
-        </Button>
-      </div>
+    <StandalonePage size="bare">
+      <Empty size="compact">
+        <EmptyMedia variant="icon">
+          <Settings2Icon />
+        </EmptyMedia>
+        <EmptyHeader>
+          <EmptyTitle>Couldn't load your settings</EmptyTitle>
+          <EmptyDescription>Your saved settings are unchanged.</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button
+            size="standard"
+            disabled={retrying}
+            aria-busy={retrying}
+            onClick={() => void ensureClientSettingsHydrated().catch(() => undefined)}
+          >
+            <RefreshIcon refreshing={retrying} />
+            {retrying ? "Retrying…" : "Retry"}
+          </Button>
+        </EmptyContent>
+      </Empty>
     </StandalonePage>
   );
 }
@@ -15,8 +15,8 @@ export function StandalonePage({
   children,
 }: {
   readonly tone?: keyof typeof backdropClassNames;
-  /** "card" is the compact auth card: 420px wide, 24px inset, 16px between blocks. */
-  readonly size?: "page" | "card";
+  /** "card" is the compact auth card: 420px wide, 24px inset, 16px between blocks. "bare" draws no card. */
+  readonly size?: "page" | "card" | "bare";
   readonly children: ReactNode;
 }) {
   return (
@@ -36,13 +36,17 @@ export function StandalonePage({
           </div>
         )}
 
-        <section
-          className={`relative w-full shrink-0 rounded-[16px] surface-popover ${size === "card" ? "max-w-[420px]" : "max-w-xl"}`}
-        >
-          <div className={size === "card" ? "flex flex-col gap-4 p-6" : "p-6 sm:p-8"}>
-            {children}
-          </div>
-        </section>
+        {size === "bare" ? (
+          children
+        ) : (
+          <section
+            className={`relative w-full shrink-0 rounded-[16px] surface-popover ${size === "card" ? "max-w-[420px]" : "max-w-xl"}`}
+          >
+            <div className={size === "card" ? "flex flex-col gap-4 p-6" : "p-6 sm:p-8"}>
+              {children}
+            </div>
+          </section>
+        )}
       </div>
     </div>
   );