diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 840e5674..f5c3bdc2 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -28,7 +28,7 @@ export default function Header({
   const { t, i18n } = useTranslation();
 
   return (
-    <header className="h-14 shrink-0 border-b border-border bg-surface/95 flex items-center gap-3 px-4 z-20">
+    <header className="glass h-14 shrink-0 border-b border-border flex items-center gap-3 px-4 z-20">
       <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={onGoToFullHistory} />
 
       {page === "feed" && (
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index ff5d3834..ba4fff70 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -35,7 +35,7 @@ export default function Modal({
       aria-modal="true"
     >
       <div
-        className={`glass-card relative w-full ${maxWidth} max-h-full overflow-y-auto rounded-2xl shadow-2xl`}
+        className={`glass relative w-full ${maxWidth} max-h-full overflow-y-auto rounded-2xl shadow-2xl`}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-start justify-between gap-3 p-5 pb-3">
diff --git a/frontend/src/components/NavSidebar.tsx b/frontend/src/components/NavSidebar.tsx
index 827ce627..9b131732 100644
--- a/frontend/src/components/NavSidebar.tsx
+++ b/frontend/src/components/NavSidebar.tsx
@@ -63,7 +63,7 @@ export default function NavSidebar({
 
   return (
     <nav
-      className={`relative shrink-0 border-r border-border bg-surface/60 flex flex-col py-3 transition-[width] ${
+      className={`glass relative shrink-0 border-r border-border flex flex-col py-3 transition-[width] ${
         collapsed ? "w-[56px] px-2" : "w-52 px-3"
       }`}
       aria-label={t("nav.primary")}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6eb89db5..2a202f95 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -22,10 +22,13 @@ html {
 body {
   margin: 0;
   color: var(--fg);
-  /* Ambient backdrop so translucent "glass" surfaces have soft color to refract. */
+  /* Ambient backdrop so translucent "glass" surfaces have soft color to refract. Kept
+     subtle but a touch richer (three soft pools, incl. a bottom glow) now that the nav,
+     header and dialogs are all frosted glass and refract it. */
   background:
-    radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
-    radial-gradient(1000px 700px at 112% 8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
+    radial-gradient(1100px 620px at 10% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
+    radial-gradient(1000px 720px at 115% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
+    radial-gradient(900px 640px at 50% 118%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
     var(--bg);
   background-attachment: fixed;
 }