diff --git a/src/app/App.tsx b/src/app/App.tsx
index 4dacfef..4cd76e6 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,15 +1,12 @@
 import { useEffect } from "react";
-import { BrowserRouter, useLocation } from "react-router";
+import { BrowserRouter } from "react-router";
 import { AuthProvider } from "@/app/auth/AuthContext";
 import AppRoutes from "./AppRoutes";
 
-const ScrollToTopOnRouteChange: React.FC = () => {
-  const { pathname } = useLocation();
-
+const AppDocumentTitle: React.FC = () => {
   useEffect(() => {
     document.title = "Vortex Sim";
-    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
-  }, [pathname]);
+  }, []);
 
   return null;
 };
@@ -17,7 +14,7 @@ const ScrollToTopOnRouteChange: React.FC = () => {
 const App: React.FC = () => {
   return (
     <BrowserRouter>
-      <ScrollToTopOnRouteChange />
+      <AppDocumentTitle />
       <AuthProvider>
         <AppRoutes />
       </AuthProvider>
diff --git a/src/app/AppShell.css b/src/app/AppShell.css
index 391b40e..dbf9fd5 100644
--- a/src/app/AppShell.css
+++ b/src/app/AppShell.css
@@ -1,12 +1,18 @@
 /* Shell */
 .app-shell {
+  --app-sidebar-width: 260px;
   display: flex;
   min-height: 100vh;
   width: 100%;
 }
 
 .app-shell > .sidebar {
-  width: 260px;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  align-self: flex-start;
+  width: var(--app-sidebar-width);
+  height: 100vh;
   flex-shrink: 0;
 }
 
@@ -17,6 +23,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
+}
+
+.workspace > :not(.main-atmosphere) {
+  position: relative;
+  z-index: 1;
 }
 
 .workspace__top {
@@ -116,7 +130,10 @@
   }
 
   .app-shell > .sidebar {
+    position: relative;
+    top: auto;
     width: 100%;
+    height: auto;
   }
 
   .workspace {
diff --git a/src/app/AppShell.tsx b/src/app/AppShell.tsx
index 0682b5d..a2fb404 100644
--- a/src/app/AppShell.tsx
+++ b/src/app/AppShell.tsx
@@ -1,18 +1,23 @@
 import AppSidebar from "./AppSidebar";
+import MainAtmosphere from "./MainAtmosphere";
 
 import "./AppShell.css";
 
 const AppShell: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <>
-      <a className="skip-link" href="#main">
+      <a
+        className="skip-link focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none"
+        href="#main"
+      >
         Skip to content
       </a>
 
       <div className="app-shell">
         <AppSidebar />
 
-        <main id="main" className="workspace">
+        <main id="main" className="workspace" tabIndex={-1}>
+          <MainAtmosphere />
           {children}
         </main>
       </div>
diff --git a/src/app/AppSidebar.css b/src/app/AppSidebar.css
index 401e326..d440bbf 100644
--- a/src/app/AppSidebar.css
+++ b/src/app/AppSidebar.css
@@ -1,10 +1,115 @@
 .sidebar {
+  --sidebar-ink-a: rgba(79, 106, 215, 0.32);
+  --sidebar-ink-b: rgba(91, 194, 181, 0.24);
+  --sidebar-ink-c: rgba(244, 179, 127, 0.2);
+  --sidebar-link-ink: rgba(111, 168, 255, 0.3);
+
   background: var(--sidebar-bg);
   border-right: 1px solid var(--sidebar-border);
   display: flex;
   flex-direction: column;
-  gap: 2rem;
-  padding: 2rem 1.5rem;
+  gap: 1.5rem;
+  padding: 1.6rem 1.2rem;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  scrollbar-width: none;
+  isolation: isolate;
+}
+
+.sidebar::-webkit-scrollbar {
+  display: none;
+}
+
+.sidebar::before,
+.sidebar::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.sidebar::before {
+  inset: 0.55rem 0.35rem;
+  background:
+    linear-gradient(
+      112deg,
+      transparent 0 14%,
+      var(--sidebar-ink-a) 18% 24%,
+      transparent 31% 48%,
+      var(--sidebar-ink-b) 54% 59%,
+      transparent 66% 100%
+    ),
+    linear-gradient(
+      74deg,
+      transparent 0 45%,
+      var(--sidebar-ink-c) 50% 56%,
+      transparent 64% 100%
+    );
+  opacity: 0.68;
+  mask-image:
+    radial-gradient(ellipse at 20% 16%, #000 0 16%, transparent 36%),
+    radial-gradient(ellipse at 78% 45%, #000 0 14%, transparent 34%),
+    radial-gradient(ellipse at 42% 83%, #000 0 12%, transparent 30%);
+  mask-composite: add;
+  transform: rotate(-7deg) skewX(-8deg);
+  animation: sidebar-ink-fade-primary 13s ease-in-out infinite alternate;
+}
+
+.sidebar::after {
+  inset: 1.25rem -1.4rem 1rem -1rem;
+  border-radius: 14px;
+  background:
+    linear-gradient(
+      168deg,
+      transparent 0 18%,
+      var(--sidebar-ink-a) 24% 31%,
+      transparent 38% 100%
+    ),
+    linear-gradient(
+      28deg,
+      transparent 0 48%,
+      var(--sidebar-ink-b) 55% 60%,
+      transparent 67% 100%
+    );
+  opacity: 0.45;
+  filter: blur(0.5px);
+  mask-image:
+    linear-gradient(90deg, transparent, #000 18% 78%, transparent),
+    radial-gradient(ellipse at 30% 28%, #000 0 12%, transparent 28%),
+    radial-gradient(ellipse at 72% 68%, #000 0 14%, transparent 30%);
+  mask-composite: add;
+  transform: rotate(-4deg) skewX(-6deg);
+  animation: sidebar-ink-fade-secondary 17s ease-in-out infinite alternate;
+}
+
+:root[data-theme="sky"] .sidebar {
+  --sidebar-ink-a: rgba(64, 132, 255, 0.36);
+  --sidebar-ink-b: rgba(60, 198, 222, 0.3);
+  --sidebar-ink-c: rgba(151, 190, 255, 0.24);
+  --sidebar-link-ink: rgba(64, 132, 255, 0.34);
+}
+
+:root[data-theme="light"] .sidebar {
+  --sidebar-ink-a: rgba(255, 144, 190, 0.3);
+  --sidebar-ink-b: rgba(245, 183, 90, 0.24);
+  --sidebar-ink-c: rgba(178, 153, 255, 0.22);
+  --sidebar-link-ink: rgba(255, 144, 190, 0.28);
+}
+
+:root[data-theme="night"] .sidebar {
+  --sidebar-ink-a: rgba(92, 142, 255, 0.38);
+  --sidebar-ink-b: rgba(178, 102, 255, 0.32);
+  --sidebar-ink-c: rgba(134, 222, 255, 0.18);
+  --sidebar-link-ink: rgba(178, 102, 255, 0.32);
+}
+
+:root[data-theme="fire"] .sidebar {
+  --sidebar-ink-a: rgba(255, 68, 0, 0.42);
+  --sidebar-ink-b: rgba(255, 158, 46, 0.34);
+  --sidebar-ink-c: rgba(255, 209, 102, 0.28);
+  --sidebar-link-ink: rgba(255, 104, 0, 0.4);
 }
 
 .sidebar__brand {
@@ -12,14 +117,40 @@
   align-items: center;
   justify-content: center;
   gap: 0.55rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  font-size: 1.25rem;
+  font-weight: 800;
+  font-size: 1.45rem;
   color: var(--sidebar-text);
-  padding: 0.65rem 0.9rem;
+  padding: 0.2rem 2.75rem 0.5rem;
   border-radius: 12px;
   width: 100%;
   position: relative;
+  z-index: 1;
+}
+
+.sidebar__brand::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 6.3rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--sidebar-ink-c) 18%,
+    var(--sidebar-ink-a) 48%,
+    var(--sidebar-ink-b) 74%,
+    transparent
+  );
+  mask-image:
+    radial-gradient(ellipse at 10% 45%, transparent 0 8%, #000 16% 100%),
+    radial-gradient(ellipse at 92% 58%, transparent 0 10%, #000 18% 100%),
+    linear-gradient(90deg, transparent, #000 12% 88%, transparent);
+  mask-composite: intersect;
+  transform: translateX(-50%) scaleX(0.92) rotate(-1deg);
+  transform-origin: center;
+  animation: sidebar-brand-ink 5.4s ease-in-out infinite alternate;
 }
 
 .sidebar__auth {
@@ -29,6 +160,8 @@
   border: 1px solid var(--sidebar-border);
   background: var(--sidebar-active-bg);
   box-shadow: var(--shadow-control);
+  position: relative;
+  z-index: 1;
 }
 
 .sidebar__authRow {
@@ -41,7 +174,6 @@
 
 .sidebar__authKicker {
   font-size: 11px;
-  letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--sidebar-muted);
 }
@@ -113,29 +245,32 @@
   line-height: 1.35;
 }
 
-.sidebar__logo {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  background: url("../assets/humanode_logo_128px_animated.gif") center/cover
-    no-repeat;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: none;
-  order: 2;
-  will-change: transform;
-  animation: sidebar-logo-float 6s ease-in-out infinite;
+.sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  position: relative;
+  z-index: 1;
 }
 
-:root[data-theme="night"] .sidebar__logo {
-  display: none;
+.sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
 }
 
-.sidebar__nav {
+.sidebar__sectionTitle {
+  padding: 0 0.55rem;
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1.4;
+  text-transform: uppercase;
+  color: var(--sidebar-muted);
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 0.5rem;
+  position: relative;
+  z-index: 1;
 }
 
 .sidebar__mobilePanel {
@@ -147,7 +282,7 @@
   border: 1px solid var(--sidebar-border);
   background: transparent;
   color: var(--sidebar-text);
-  border-radius: 10px;
+  border-radius: 8px;
   width: 2.25rem;
   height: 2.25rem;
   align-items: center;
@@ -166,30 +301,60 @@
 }
 
 .sidebar__link {
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--sidebar-muted);
-  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.035);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--sidebar-text);
+  border-radius: 8px;
   padding: 0.65rem 0.9rem;
   text-align: left;
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  position: relative;
+  overflow: hidden;
   transition:
     border 0.2s,
     color 0.2s,
     background 0.2s;
 }
 
+.sidebar__link::before {
+  content: "";
+  position: absolute;
+  inset: -80% -35%;
+  background: linear-gradient(
+    102deg,
+    transparent 0 21%,
+    var(--sidebar-link-ink) 31% 38%,
+    transparent 50% 100%
+  );
+  mask-image:
+    radial-gradient(ellipse at 28% 48%, #000 0 22%, transparent 45%),
+    linear-gradient(90deg, transparent, #000 16% 78%, transparent);
+  mask-composite: add;
+  opacity: 0;
+  transform: translateX(-48%) rotate(-7deg) skewX(-10deg);
+  transition: opacity 180ms ease;
+}
+
+.sidebar__link:hover::before,
+.sidebar__link:focus-visible::before {
+  opacity: 1;
+}
+
 .sidebar__icon {
   width: 22px;
   height: 22px;
   flex-shrink: 0;
   opacity: 0.9;
+  position: relative;
+  z-index: 1;
 }
 
 .sidebar__link > span {
   white-space: nowrap;
+  position: relative;
+  z-index: 1;
 }
 
 .sidebar__link--active {
@@ -197,38 +362,78 @@
   border-color: var(--sidebar-primary-dim);
   background: var(--sidebar-active-bg);
   box-shadow: var(--sidebar-active-shadow);
-  animation: sidebar-active-pulse 2.8s ease-in-out infinite;
 }
 
-.sidebar__link--nested {
-  padding-left: 1.5rem;
-}
+@keyframes sidebar-ink-fade-primary {
+  0% {
+    opacity: 0.18;
+  }
 
-@keyframes sidebar-logo-float {
-  0%,
-  100% {
-    transform: translateY(0);
+  22% {
+    opacity: 0.7;
+  }
+
+  45% {
+    opacity: 0.58;
+  }
+
+  72% {
+    opacity: 0.14;
   }
-  50% {
-    transform: translateY(-2px);
+
+  100% {
+    opacity: 0.64;
   }
 }
 
-@keyframes sidebar-active-pulse {
-  0%,
+@keyframes sidebar-ink-fade-secondary {
+  0% {
+    opacity: 0;
+  }
+
+  28% {
+    opacity: 0.46;
+  }
+
+  64% {
+    opacity: 0.12;
+  }
+
   100% {
-    box-shadow: var(--sidebar-active-shadow);
+    opacity: 0.42;
   }
-  50% {
-    box-shadow: var(--sidebar-active-shadow-strong);
+}
+
+@keyframes sidebar-brand-ink {
+  0% {
+    opacity: 0.18;
+  }
+
+  35% {
+    opacity: 0.92;
+  }
+
+  70% {
+    opacity: 0.22;
+  }
+
+  100% {
+    opacity: 0.78;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .sidebar__logo,
-  .sidebar__link--active {
+  .sidebar::before,
+  .sidebar::after,
+  .sidebar__brand::after,
+  .sidebar__link:hover::before,
+  .sidebar__link:focus-visible::before {
     animation: none;
   }
+
+  .sidebar__link {
+    transition: none;
+  }
 }
 
 @media (max-width: 960px) {
@@ -237,18 +442,13 @@
     padding: 0.95rem 1rem;
     border-right: 0;
     border-bottom: 1px solid var(--sidebar-border);
+    overflow: visible;
   }
 
   .sidebar__brand {
-    justify-content: flex-start;
+    justify-content: center;
     gap: 0.5rem;
-    padding: 0.35rem 0;
-  }
-
-  .sidebar__logo {
-    width: 34px;
-    height: 34px;
-    border-radius: 10px;
+    padding: 0.35rem 2.75rem;
   }
 
   .sidebar__mobileToggle {
@@ -272,6 +472,10 @@
     border-bottom: 1px solid var(--sidebar-border);
   }
 
+  .sidebar__section {
+    gap: 0.3rem;
+  }
+
   .sidebar__link > span {
     white-space: normal;
   }
diff --git a/src/app/AppSidebar.tsx b/src/app/AppSidebar.tsx
index 471954e..3984e6e 100644
--- a/src/app/AppSidebar.tsx
+++ b/src/app/AppSidebar.tsx
@@ -1,5 +1,5 @@
-import { NavLink, useLocation } from "react-router";
-import { useEffect, useState } from "react";
+import { NavLink } from "react-router";
+import { useState } from "react";
 import "./AppSidebar.css";
 import clsx from "clsx";
 import {
@@ -13,7 +13,6 @@ import {
   Rocket,
   Scale,
   Settings,
-  SlidersHorizontal,
   User,
   Users,
   FileText,
@@ -24,11 +23,6 @@ import { AuthSidebarPanel } from "@/app/auth/AuthContext";
 
 const navClass = ({ isActive }: { isActive: boolean }) =>
   clsx("sidebar__link", isActive && "sidebar__link--active");
-const nestedNavClass = ({ isActive }: { isActive: boolean }) =>
-  clsx(
-    "sidebar__link sidebar__link--nested",
-    isActive && "sidebar__link--active",
-  );
 
 type NavItem = {
   to: string;
@@ -36,41 +30,52 @@ type NavItem = {
   Icon: React.ComponentType<{ className?: string }>;
 };
 
+type NavGroup = {
+  label: string;
+  items: NavItem[];
+};
+
 const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const [settingsOpen, setSettingsOpen] = useState(false);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
-  const location = useLocation();
-  const settingsRouteActive =
-    location.pathname.startsWith("/app/settings") ||
-    location.pathname.startsWith("/app/profile");
-
-  useEffect(() => {
-    setMobileNavOpen(false);
-  }, [location.pathname]);
 
-  useEffect(() => {
-    setSettingsOpen(settingsRouteActive);
-  }, [settingsRouteActive]);
+  const closeMobileNav = () =>
+    setMobileNavOpen((open) => (open ? false : open));
 
-  const navItems: NavItem[] = [
-    { to: "/app/feed", label: "Feed", Icon: Activity },
-    { to: "/app/my-governance", label: "My governance", Icon: Gavel },
-    { to: "/app/proposals", label: "Proposals", Icon: FileText },
-    { to: "/app/chambers", label: "Chambers", Icon: Lightbulb },
-    { to: "/app/human-nodes", label: "Human nodes", Icon: Users },
-    { to: "/app/formation", label: "Formation", Icon: Rocket },
-    { to: "/app/factions", label: "Factions", Icon: Flag },
-    { to: "/app/cm", label: "CM panel", Icon: Scale },
-    { to: "/app/invision", label: "Invision", Icon: Eye },
-    { to: "/app/courts", label: "Courts", Icon: Landmark },
-    { to: "/app/vortexopedia", label: "Vortexopedia", Icon: BookOpen },
+  const navGroups: NavGroup[] = [
+    {
+      label: "Governance",
+      items: [
+        { to: "/app/feed", label: "Feed", Icon: Activity },
+        { to: "/app/my-governance", label: "My governance", Icon: Gavel },
+        { to: "/app/proposals", label: "Proposals", Icon: FileText },
+        { to: "/app/formation", label: "Formation", Icon: Rocket },
+      ],
+    },
+    {
+      label: "Institutions",
+      items: [
+        { to: "/app/chambers", label: "Chambers", Icon: Lightbulb },
+        { to: "/app/factions", label: "Factions", Icon: Flag },
+        { to: "/app/cm", label: "CM panel", Icon: Scale },
+        { to: "/app/courts", label: "Courts", Icon: Landmark },
+      ],
+    },
+    {
+      label: "System",
+      items: [
+        { to: "/app/profile", label: "My profile", Icon: User },
+        { to: "/app/invision", label: "Invision", Icon: Eye },
+        { to: "/app/human-nodes", label: "Human nodes", Icon: Users },
+        { to: "/app/vortexopedia", label: "Vortexopedia", Icon: BookOpen },
+        { to: "/app/settings", label: "Settings", Icon: Settings },
+      ],
+    },
   ];
 
   return (
     <aside className={clsx("sidebar", mobileNavOpen && "sidebar--mobileOpen")}>
       <div className="sidebar__brand">
         <span>Vortex</span>
-        <span className="sidebar__logo" aria-hidden="true"></span>
         <button
           type="button"
           className="sidebar__mobileToggle"
@@ -92,48 +97,22 @@ const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
         <AuthSidebarPanel />
       </div>
       <nav id="sidebar-nav" className="sidebar__nav" aria-label="Primary">
-        {navItems.map(({ to, label, Icon }) => (
-          <NavLink
-            key={to}
-            className={navClass}
-            to={to}
-            onClick={() => setMobileNavOpen(false)}
-          >
-            <Icon className="sidebar__icon" aria-hidden="true" />
-            <span>{label}</span>
-          </NavLink>
-        ))}
-        <button
-          type="button"
-          className={clsx(
-            "sidebar__link",
-            settingsRouteActive && "sidebar__link--active",
-          )}
-          onClick={() => setSettingsOpen((open) => !open)}
-        >
-          <Settings className="sidebar__icon" aria-hidden="true" />
-          <span>Settings</span>
-        </button>
-        {settingsOpen && (
-          <div className="pt-1 pl-4">
-            <NavLink
-              className={nestedNavClass}
-              to="/app/profile"
-              onClick={() => setMobileNavOpen(false)}
-            >
-              <User className="sidebar__icon" aria-hidden="true" />
-              <span>My profile</span>
-            </NavLink>
-            <NavLink
-              className={nestedNavClass}
-              to="/app/settings"
-              onClick={() => setMobileNavOpen(false)}
-            >
-              <SlidersHorizontal className="sidebar__icon" aria-hidden="true" />
-              <span>General</span>
-            </NavLink>
+        {navGroups.map((group) => (
+          <div className="sidebar__section" key={group.label}>
+            <div className="sidebar__sectionTitle">{group.label}</div>
+            {group.items.map(({ to, label, Icon }) => (
+              <NavLink
+                key={to}
+                className={navClass}
+                to={to}
+                onClick={closeMobileNav}
+              >
+                <Icon className="sidebar__icon" aria-hidden="true" />
+                <span>{label}</span>
+              </NavLink>
+            ))}
           </div>
-        )}
+        ))}
       </nav>
 
       {children}
diff --git a/src/app/MainAtmosphere.css b/src/app/MainAtmosphere.css
new file mode 100644
index 0000000..ea9e433
--- /dev/null
+++ b/src/app/MainAtmosphere.css
@@ -0,0 +1,966 @@
+.main-atmosphere {
+  position: fixed;
+  inset: 0 0 0 var(--app-sidebar-width, 260px);
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+  contain: paint;
+}
+
+.main-atmosphere__theme {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 900ms ease,
+    visibility 900ms ease;
+}
+
+.main-atmosphere__sky {
+  opacity: 1;
+  visibility: visible;
+}
+
+:root[data-theme="light"] .main-atmosphere__sky,
+:root[data-theme="night"] .main-atmosphere__sky,
+:root[data-theme="fire"] .main-atmosphere__sky {
+  opacity: 0;
+  visibility: hidden;
+}
+
+:root[data-theme="light"] .main-atmosphere__light,
+:root[data-theme="night"] .main-atmosphere__night,
+:root[data-theme="fire"] .main-atmosphere__fire {
+  opacity: 1;
+  visibility: visible;
+}
+
+.main-atmosphere__cloud {
+  position: absolute;
+  width: 28rem;
+  height: 9rem;
+  overflow: visible;
+  filter: drop-shadow(0 12px 24px rgba(93, 154, 240, 0.18))
+    drop-shadow(0 0 18px rgba(255, 255, 255, 0.14));
+  opacity: 0;
+  transform: translate3d(-20vw, 0, 0) scale(0.94);
+  animation: atmosphere-cloud-pass 44s linear infinite;
+}
+
+.main-atmosphere__cloud-wash {
+  fill: rgba(159, 199, 255, 0.1);
+  stroke: rgba(255, 255, 255, 0.14);
+  stroke-width: 1.4;
+  stroke-linejoin: round;
+}
+
+.main-atmosphere__cloud-fill {
+  fill: rgba(255, 255, 255, 0.18);
+  stroke: rgba(255, 255, 255, 0.18);
+  stroke-width: 1.8;
+  stroke-linejoin: round;
+}
+
+.main-atmosphere__cloud-line {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.74);
+  stroke-width: 5.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.main-atmosphere__cloud-line--base {
+  stroke: rgba(126, 178, 255, 0.38);
+  stroke-width: 4.6;
+}
+
+.main-atmosphere__cloud-line--curl {
+  stroke: rgba(255, 255, 255, 0.6);
+  stroke-width: 4;
+}
+
+.main-atmosphere__cloud-line--under {
+  stroke: rgba(126, 178, 255, 0.32);
+  stroke-width: 3.7;
+}
+
+.main-atmosphere__cloud--1 {
+  top: 8vh;
+  left: 3vw;
+  animation-delay: -8s;
+}
+
+.main-atmosphere__cloud--2 {
+  top: 32vh;
+  left: 24vw;
+  width: 22rem;
+  height: 7.5rem;
+  animation-delay: -24s;
+  animation-duration: 52s;
+}
+
+.main-atmosphere__cloud--2 .main-atmosphere__cloud-fill {
+  fill: rgba(255, 255, 255, 0.16);
+}
+
+.main-atmosphere__cloud--2 .main-atmosphere__cloud-wash {
+  fill: rgba(126, 178, 255, 0.08);
+}
+
+.main-atmosphere__cloud--3 {
+  top: 58vh;
+  left: 10vw;
+  width: 30rem;
+  animation-delay: -36s;
+  animation-duration: 60s;
+}
+
+.main-atmosphere__cloud--3 .main-atmosphere__cloud-line {
+  stroke: rgba(255, 255, 255, 0.58);
+}
+
+.main-atmosphere__cloud--3 .main-atmosphere__cloud-wash {
+  fill: rgba(255, 255, 255, 0.08);
+}
+
+.main-atmosphere__cloud--4 {
+  top: 76vh;
+  left: 46vw;
+  width: 23rem;
+  height: 6.8rem;
+  animation-delay: -16s;
+  animation-duration: 48s;
+}
+
+.main-atmosphere__cloud--4 .main-atmosphere__cloud-line--curl {
+  stroke: rgba(255, 255, 255, 0.5);
+}
+
+.main-atmosphere__cloud--4 .main-atmosphere__cloud-wash {
+  fill: rgba(126, 178, 255, 0.07);
+}
+
+.main-atmosphere__petal {
+  position: absolute;
+  width: 0.92rem;
+  height: 1.62rem;
+  border-radius: 72% 18% 72% 18%;
+  background:
+    radial-gradient(
+      circle at 34% 24%,
+      rgba(255, 255, 255, 0.92),
+      transparent 34%
+    ),
+    linear-gradient(
+      145deg,
+      rgba(255, 160, 194, 0.78),
+      rgba(151, 189, 255, 0.32)
+    );
+  box-shadow: 0 0 24px rgba(255, 156, 195, 0.22);
+  opacity: 0;
+  transform: translate3d(0, -8vh, 0) rotate(0deg);
+  animation: atmosphere-petal-flow 22s ease-in-out infinite;
+}
+
+.main-atmosphere__petal--1 {
+  left: 8%;
+  animation-delay: -2s;
+}
+
+.main-atmosphere__petal--2 {
+  left: 18%;
+  animation-delay: -13s;
+  animation-duration: 27s;
+}
+
+.main-atmosphere__petal--3 {
+  left: 31%;
+  animation-delay: -6s;
+  animation-duration: 24s;
+}
+
+.main-atmosphere__petal--4 {
+  left: 43%;
+  animation-delay: -19s;
+  animation-duration: 31s;
+}
+
+.main-atmosphere__petal--5 {
+  left: 55%;
+  animation-delay: -10s;
+  animation-duration: 25s;
+}
+
+.main-atmosphere__petal--6 {
+  left: 67%;
+  animation-delay: -22s;
+  animation-duration: 30s;
+}
+
+.main-atmosphere__petal--7 {
+  left: 78%;
+  animation-delay: -4s;
+  animation-duration: 26s;
+}
+
+.main-atmosphere__petal--8 {
+  left: 88%;
+  animation-delay: -16s;
+  animation-duration: 29s;
+}
+
+.main-atmosphere__petal--9 {
+  left: 96%;
+  animation-delay: -8s;
+  animation-duration: 34s;
+}
+
+.main-atmosphere__petal--10 {
+  left: 3%;
+  animation-delay: -21s;
+  animation-duration: 28s;
+}
+
+.main-atmosphere__petal--11 {
+  left: 25%;
+  animation-delay: -15s;
+  animation-duration: 33s;
+}
+
+.main-atmosphere__petal--12 {
+  left: 49%;
+  animation-delay: -5s;
+  animation-duration: 29s;
+}
+
+.main-atmosphere__petal--13 {
+  left: 72%;
+  animation-delay: -18s;
+  animation-duration: 32s;
+}
+
+.main-atmosphere__petal--14 {
+  left: 93%;
+  animation-delay: -12s;
+  animation-duration: 27s;
+}
+
+.main-atmosphere__star {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  border-radius: 999px;
+  background: rgba(238, 247, 255, 0.72);
+  box-shadow: 0 0 12px rgba(111, 168, 255, 0.52);
+  opacity: 0;
+  animation: atmosphere-star-pulse 9s ease-in-out infinite;
+}
+
+.main-atmosphere__star--1 {
+  top: 8%;
+  left: 7%;
+  animation-delay: -1s;
+}
+.main-atmosphere__star--2 {
+  top: 18%;
+  left: 16%;
+  animation-delay: -7s;
+}
+.main-atmosphere__star--3 {
+  top: 12%;
+  left: 31%;
+  animation-delay: -4s;
+}
+.main-atmosphere__star--4 {
+  top: 28%;
+  left: 44%;
+  animation-delay: -8s;
+}
+.main-atmosphere__star--5 {
+  top: 10%;
+  left: 58%;
+  animation-delay: -2s;
+}
+.main-atmosphere__star--6 {
+  top: 23%;
+  left: 74%;
+  animation-delay: -5s;
+}
+.main-atmosphere__star--7 {
+  top: 15%;
+  left: 91%;
+  animation-delay: -9s;
+}
+.main-atmosphere__star--8 {
+  top: 39%;
+  left: 10%;
+  animation-delay: -6s;
+}
+.main-atmosphere__star--9 {
+  top: 48%;
+  left: 23%;
+  animation-delay: -3s;
+}
+.main-atmosphere__star--10 {
+  top: 42%;
+  left: 37%;
+  animation-delay: -10s;
+}
+.main-atmosphere__star--11 {
+  top: 54%;
+  left: 51%;
+  animation-delay: -11s;
+}
+.main-atmosphere__star--12 {
+  top: 37%;
+  left: 68%;
+  animation-delay: -4s;
+}
+.main-atmosphere__star--13 {
+  top: 45%;
+  left: 83%;
+  animation-delay: -12s;
+}
+.main-atmosphere__star--14 {
+  top: 61%;
+  left: 14%;
+  animation-delay: -8s;
+}
+.main-atmosphere__star--15 {
+  top: 70%;
+  left: 29%;
+  animation-delay: -2s;
+}
+.main-atmosphere__star--16 {
+  top: 66%;
+  left: 46%;
+  animation-delay: -9s;
+}
+.main-atmosphere__star--17 {
+  top: 75%;
+  left: 62%;
+  animation-delay: -5s;
+}
+.main-atmosphere__star--18 {
+  top: 64%;
+  left: 77%;
+  animation-delay: -1s;
+}
+.main-atmosphere__star--19 {
+  top: 82%;
+  left: 88%;
+  animation-delay: -7s;
+}
+.main-atmosphere__star--20 {
+  top: 88%;
+  left: 19%;
+  animation-delay: -3s;
+}
+.main-atmosphere__star--21 {
+  top: 84%;
+  left: 39%;
+  animation-delay: -12s;
+}
+.main-atmosphere__star--22 {
+  top: 91%;
+  left: 56%;
+  animation-delay: -6s;
+}
+.main-atmosphere__star--23 {
+  top: 86%;
+  left: 72%;
+  animation-delay: -4s;
+}
+.main-atmosphere__star--24 {
+  top: 31%;
+  left: 91%;
+  animation-delay: -10s;
+}
+.main-atmosphere__star--25 {
+  top: 56%;
+  left: 92%;
+  animation-delay: -2s;
+}
+.main-atmosphere__star--26 {
+  top: 20%;
+  left: 52%;
+  animation-delay: -6s;
+}
+.main-atmosphere__star--27 {
+  top: 73%;
+  left: 8%;
+  animation-delay: -11s;
+}
+.main-atmosphere__star--28 {
+  top: 5%;
+  left: 81%;
+  animation-delay: -5s;
+}
+
+.main-atmosphere__galaxy {
+  position: absolute;
+  width: 18rem;
+  height: 10rem;
+  opacity: 0;
+  border-radius: 999px;
+  background:
+    radial-gradient(
+      ellipse at 50% 50%,
+      rgba(252, 248, 224, 0.72),
+      transparent 6%
+    ),
+    radial-gradient(
+      ellipse at 50% 50%,
+      rgba(224, 236, 255, 0.48),
+      transparent 14%
+    ),
+    radial-gradient(
+      ellipse at 44% 52%,
+      rgba(111, 168, 255, 0.28),
+      transparent 31%
+    ),
+    radial-gradient(
+      ellipse at 57% 47%,
+      rgba(176, 132, 255, 0.22),
+      transparent 42%
+    ),
+    radial-gradient(
+      ellipse at 50% 50%,
+      rgba(255, 255, 255, 0.08),
+      transparent 72%
+    );
+  filter: blur(0.1px) drop-shadow(0 0 30px rgba(111, 168, 255, 0.24))
+    drop-shadow(0 0 54px rgba(176, 132, 255, 0.1));
+  transform: rotate(-13deg) scale(0.9);
+  animation: atmosphere-galaxy-breathe 24s ease-in-out infinite;
+}
+
+.main-atmosphere__galaxy::before,
+.main-atmosphere__galaxy::after,
+.main-atmosphere__galaxy b,
+.main-atmosphere__galaxy i {
+  position: absolute;
+  display: block;
+  content: "";
+}
+
+.main-atmosphere__galaxy::before,
+.main-atmosphere__galaxy::after {
+  inset: 31% 11%;
+  border-radius: 999px;
+  border-top: 0.26rem solid rgba(218, 232, 255, 0.44);
+  border-bottom: 0.12rem solid rgba(176, 132, 255, 0.18);
+  filter: blur(0.35px);
+  transform: rotate(9deg);
+}
+
+.main-atmosphere__galaxy::after {
+  inset: 37% 13%;
+  border-top-color: rgba(111, 168, 255, 0.22);
+  border-bottom-color: rgba(245, 250, 255, 0.18);
+  transform: rotate(-11deg);
+}
+
+.main-atmosphere__galaxy b {
+  height: 0.18rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(238, 247, 255, 0.5),
+    rgba(111, 168, 255, 0.18),
+    transparent
+  );
+  filter: blur(0.45px);
+  opacity: 0.62;
+}
+
+.main-atmosphere__galaxy b:nth-of-type(1) {
+  top: 42%;
+  left: 13%;
+  width: 74%;
+  transform: rotate(-13deg);
+}
+
+.main-atmosphere__galaxy b:nth-of-type(2) {
+  top: 55%;
+  left: 16%;
+  width: 68%;
+  transform: rotate(14deg);
+}
+
+.main-atmosphere__galaxy b:nth-of-type(3) {
+  top: 49%;
+  left: 29%;
+  width: 42%;
+  transform: rotate(-2deg);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 244, 202, 0.52),
+    rgba(176, 132, 255, 0.2),
+    transparent
+  );
+}
+
+.main-atmosphere__galaxy i {
+  width: 0.22rem;
+  height: 0.22rem;
+  border-radius: 999px;
+  background: rgba(245, 250, 255, 0.72);
+  box-shadow:
+    0 0 10px rgba(111, 168, 255, 0.54),
+    0 0 18px rgba(176, 132, 255, 0.2);
+  opacity: 0.72;
+}
+
+.main-atmosphere__galaxy i:nth-of-type(1) {
+  top: 47%;
+  left: 49%;
+  width: 0.34rem;
+  height: 0.34rem;
+}
+
+.main-atmosphere__galaxy i:nth-of-type(2) {
+  top: 34%;
+  left: 29%;
+}
+
+.main-atmosphere__galaxy i:nth-of-type(3) {
+  top: 61%;
+  left: 68%;
+}
+
+.main-atmosphere__galaxy i:nth-of-type(4) {
+  top: 39%;
+  left: 77%;
+  width: 0.16rem;
+  height: 0.16rem;
+}
+
+.main-atmosphere__galaxy i:nth-of-type(5) {
+  top: 55%;
+  left: 38%;
+  width: 0.18rem;
+  height: 0.18rem;
+}
+
+.main-atmosphere__galaxy i:nth-of-type(6) {
+  top: 48%;
+  left: 61%;
+  width: 0.2rem;
+  height: 0.2rem;
+}
+
+.main-atmosphere__galaxy i:nth-of-type(7) {
+  top: 66%;
+  left: 23%;
+  width: 0.14rem;
+  height: 0.14rem;
+}
+
+.main-atmosphere__galaxy--1 {
+  top: 16%;
+  left: 13%;
+  animation-delay: -6s;
+}
+
+.main-atmosphere__galaxy--2 {
+  top: 35%;
+  left: 59%;
+  width: 15rem;
+  height: 8.4rem;
+  transform: rotate(18deg) scale(0.82);
+  animation-delay: -14s;
+  animation-duration: 29s;
+}
+
+.main-atmosphere__galaxy--2 {
+  background:
+    radial-gradient(
+      ellipse at 50% 50%,
+      rgba(252, 248, 224, 0.62),
+      transparent 7%
+    ),
+    radial-gradient(
+      ellipse at 52% 51%,
+      rgba(224, 236, 255, 0.42),
+      transparent 15%
+    ),
+    radial-gradient(
+      ellipse at 48% 48%,
+      rgba(134, 222, 255, 0.2),
+      transparent 34%
+    ),
+    radial-gradient(
+      ellipse at 55% 52%,
+      rgba(176, 132, 255, 0.18),
+      transparent 56%
+    );
+}
+
+.main-atmosphere__galaxy--3 {
+  top: 66%;
+  left: 31%;
+  width: 20rem;
+  height: 10.6rem;
+  transform: rotate(-24deg) scale(1.02);
+  animation-delay: -2s;
+  animation-duration: 31s;
+}
+
+.main-atmosphere__galaxy--3 {
+  background:
+    radial-gradient(
+      ellipse at 50% 50%,
+      rgba(252, 248, 224, 0.74),
+      transparent 6%
+    ),
+    radial-gradient(
+      ellipse at 50% 50%,
+      rgba(224, 236, 255, 0.5),
+      transparent 16%
+    ),
+    radial-gradient(
+      ellipse at 43% 52%,
+      rgba(111, 168, 255, 0.3),
+      transparent 34%
+    ),
+    radial-gradient(
+      ellipse at 58% 47%,
+      rgba(176, 132, 255, 0.24),
+      transparent 48%
+    ),
+    radial-gradient(
+      ellipse at 50% 50%,
+      rgba(255, 255, 255, 0.1),
+      transparent 75%
+    );
+}
+
+.main-atmosphere__campfire-glow {
+  position: absolute;
+  left: 50%;
+  bottom: -9rem;
+  width: min(64vw, 46rem);
+  height: 24rem;
+  border-radius: 999px;
+  background:
+    radial-gradient(
+      ellipse at 50% 78%,
+      rgba(255, 82, 0, 0.34),
+      transparent 42%
+    ),
+    radial-gradient(
+      ellipse at 50% 56%,
+      rgba(255, 174, 46, 0.24),
+      transparent 34%
+    ),
+    radial-gradient(
+      ellipse at 50% 100%,
+      rgba(255, 24, 0, 0.22),
+      transparent 52%
+    );
+  filter: blur(18px);
+  opacity: 0.72;
+  transform: translateX(-50%);
+  animation: atmosphere-campfire-glow 8s ease-in-out infinite;
+}
+
+.main-atmosphere__smoke {
+  position: absolute;
+  bottom: -2rem;
+  width: 12rem;
+  height: 18rem;
+  border-radius: 999px;
+  background:
+    radial-gradient(
+      ellipse at 50% 76%,
+      rgba(221, 166, 116, 0.13),
+      transparent 44%
+    ),
+    radial-gradient(
+      ellipse at 44% 42%,
+      rgba(190, 162, 146, 0.12),
+      transparent 48%
+    ),
+    radial-gradient(
+      ellipse at 58% 24%,
+      rgba(255, 230, 205, 0.08),
+      transparent 44%
+    );
+  filter: blur(18px);
+  opacity: 0;
+  transform: translate3d(0, 0, 0) scale(0.72);
+  animation: atmosphere-smoke-rise 24s ease-in-out infinite;
+}
+
+.main-atmosphere__smoke--1 {
+  left: 20%;
+  animation-delay: -4s;
+}
+
+.main-atmosphere__smoke--2 {
+  left: 36%;
+  width: 15rem;
+  animation-delay: -15s;
+  animation-duration: 29s;
+}
+
+.main-atmosphere__smoke--3 {
+  left: 52%;
+  height: 22rem;
+  animation-delay: -9s;
+  animation-duration: 27s;
+}
+
+.main-atmosphere__smoke--4 {
+  left: 68%;
+  width: 10rem;
+  animation-delay: -21s;
+  animation-duration: 31s;
+}
+
+.main-atmosphere__smoke--5 {
+  left: 82%;
+  width: 13rem;
+  animation-delay: -2s;
+  animation-duration: 26s;
+}
+
+.main-atmosphere__cinder {
+  position: absolute;
+  bottom: -2rem;
+  width: 0.22rem;
+  height: 0.22rem;
+  border-radius: 999px;
+  background: rgba(255, 192, 80, 0.86);
+  box-shadow:
+    0 0 10px rgba(255, 134, 0, 0.62),
+    0 0 22px rgba(255, 62, 0, 0.34);
+  opacity: 0;
+  transform: translate3d(0, 0, 0) scale(0.6);
+  animation: atmosphere-cinder-rise 13s ease-in-out infinite;
+}
+
+.main-atmosphere__cinder--1 {
+  left: 12%;
+  animation-delay: -1s;
+}
+.main-atmosphere__cinder--2 {
+  left: 18%;
+  animation-delay: -7s;
+  animation-duration: 16s;
+}
+.main-atmosphere__cinder--3 {
+  left: 24%;
+  animation-delay: -11s;
+}
+.main-atmosphere__cinder--4 {
+  left: 31%;
+  animation-delay: -4s;
+  animation-duration: 15s;
+}
+.main-atmosphere__cinder--5 {
+  left: 38%;
+  animation-delay: -13s;
+}
+.main-atmosphere__cinder--6 {
+  left: 45%;
+  animation-delay: -8s;
+  animation-duration: 17s;
+}
+.main-atmosphere__cinder--7 {
+  left: 51%;
+  animation-delay: -2s;
+}
+.main-atmosphere__cinder--8 {
+  left: 57%;
+  animation-delay: -10s;
+  animation-duration: 14s;
+}
+.main-atmosphere__cinder--9 {
+  left: 63%;
+  animation-delay: -6s;
+}
+.main-atmosphere__cinder--10 {
+  left: 69%;
+  animation-delay: -12s;
+  animation-duration: 18s;
+}
+.main-atmosphere__cinder--11 {
+  left: 74%;
+  animation-delay: -3s;
+}
+.main-atmosphere__cinder--12 {
+  left: 79%;
+  animation-delay: -15s;
+  animation-duration: 16s;
+}
+.main-atmosphere__cinder--13 {
+  left: 84%;
+  animation-delay: -5s;
+}
+.main-atmosphere__cinder--14 {
+  left: 88%;
+  animation-delay: -9s;
+  animation-duration: 19s;
+}
+.main-atmosphere__cinder--15 {
+  left: 92%;
+  animation-delay: -14s;
+}
+.main-atmosphere__cinder--16 {
+  left: 96%;
+  animation-delay: -6s;
+  animation-duration: 15s;
+}
+
+@keyframes atmosphere-cloud-pass {
+  0%,
+  100% {
+    opacity: 0;
+    transform: translate3d(-22vw, 0, 0) scale(0.94);
+  }
+  18%,
+  72% {
+    opacity: 0.78;
+  }
+  50% {
+    transform: translate3d(16vw, -1.4vh, 0) scale(1);
+  }
+  92% {
+    opacity: 0;
+    transform: translate3d(45vw, 0.8vh, 0) scale(1.04);
+  }
+}
+
+@keyframes atmosphere-petal-flow {
+  0%,
+  100% {
+    opacity: 0;
+    transform: translate3d(-1rem, -10vh, 0) rotate(0deg);
+  }
+  12% {
+    opacity: 0.76;
+  }
+  48% {
+    transform: translate3d(2.8rem, 48vh, 0) rotate(118deg);
+  }
+  84% {
+    opacity: 0.34;
+    transform: translate3d(-2.2rem, 98vh, 0) rotate(226deg);
+  }
+}
+
+@keyframes atmosphere-star-pulse {
+  0%,
+  100% {
+    opacity: 0.1;
+    transform: scale(0.72);
+  }
+  45% {
+    opacity: 0.68;
+    transform: scale(1);
+  }
+  72% {
+    opacity: 0.24;
+  }
+}
+
+@keyframes atmosphere-galaxy-breathe {
+  0%,
+  100% {
+    opacity: 0;
+    filter: blur(0.7px) drop-shadow(0 0 8px rgba(111, 168, 255, 0.08));
+  }
+  26%,
+  60% {
+    opacity: 0.58;
+    filter: blur(0.2px) drop-shadow(0 0 24px rgba(111, 168, 255, 0.22));
+  }
+  78% {
+    opacity: 0.12;
+  }
+}
+
+@keyframes atmosphere-campfire-glow {
+  0%,
+  100% {
+    opacity: 0.52;
+    transform: translateX(-50%) scale(0.94);
+  }
+  46% {
+    opacity: 0.78;
+    transform: translateX(-50%) scale(1.04);
+  }
+}
+
+@keyframes atmosphere-smoke-rise {
+  0%,
+  100% {
+    opacity: 0;
+    transform: translate3d(-1rem, 6vh, 0) scale(0.68);
+  }
+  22% {
+    opacity: 0.28;
+  }
+  58% {
+    opacity: 0.18;
+    transform: translate3d(1.6rem, -42vh, 0) scale(1.08);
+  }
+  88% {
+    opacity: 0;
+    transform: translate3d(-2rem, -84vh, 0) scale(1.48);
+  }
+}
+
+@keyframes atmosphere-cinder-rise {
+  0%,
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(0.48);
+  }
+  12% {
+    opacity: 0.86;
+  }
+  52% {
+    opacity: 0.54;
+    transform: translate3d(1.4rem, -46vh, 0) scale(1);
+  }
+  86% {
+    opacity: 0;
+    transform: translate3d(-1.1rem, -92vh, 0) scale(0.72);
+  }
+}
+
+@media (max-width: 960px) {
+  .main-atmosphere {
+    inset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .main-atmosphere__theme,
+  .main-atmosphere__cloud,
+  .main-atmosphere__petal,
+  .main-atmosphere__star,
+  .main-atmosphere__galaxy,
+  .main-atmosphere__campfire-glow,
+  .main-atmosphere__smoke,
+  .main-atmosphere__cinder {
+    animation: none;
+  }
+
+  .main-atmosphere__cloud,
+  .main-atmosphere__petal,
+  .main-atmosphere__star,
+  .main-atmosphere__galaxy,
+  .main-atmosphere__campfire-glow,
+  .main-atmosphere__smoke,
+  .main-atmosphere__cinder {
+    opacity: 0.16;
+  }
+}
diff --git a/src/app/MainAtmosphere.tsx b/src/app/MainAtmosphere.tsx
new file mode 100644
index 0000000..8c8435d
--- /dev/null
+++ b/src/app/MainAtmosphere.tsx
@@ -0,0 +1,153 @@
+import "./MainAtmosphere.css";
+
+const petals = Array.from({ length: 14 }, (_, index) => index + 1);
+const stars = Array.from({ length: 28 }, (_, index) => index + 1);
+const galaxies = Array.from({ length: 3 }, (_, index) => index + 1);
+const smokePlumes = Array.from({ length: 5 }, (_, index) => index + 1);
+const cinders = Array.from({ length: 16 }, (_, index) => index + 1);
+
+const skyClouds = [
+  {
+    id: 1,
+    fill: "M28 74 C48 48 78 48 95 68 C103 35 142 22 170 45 C187 18 231 18 250 51 C274 34 313 44 321 76 C348 66 382 76 394 101 C334 110 262 107 207 108 C145 109 85 105 28 100 Z",
+    wash: "M20 88 C80 44 137 34 196 45 C255 56 305 59 402 93 C319 121 127 122 20 105 Z",
+    top: "M35 82 C54 51 82 50 98 69 C106 34 144 24 169 47 C187 18 229 19 250 51 C275 35 309 47 320 76 C344 68 374 75 391 99",
+    base: "M28 100 C90 106 145 109 207 108 C263 107 333 110 394 101",
+    curls: [
+      "M112 78 C132 60 159 65 161 84 C163 100 139 101 132 88",
+      "M233 75 C254 58 284 63 287 84 C289 103 262 105 252 90",
+    ],
+    under: ["M71 95 C104 87 133 91 158 99", "M296 96 C322 88 353 91 377 100"],
+  },
+  {
+    id: 2,
+    fill: "M36 78 C50 58 78 55 94 72 C100 44 130 31 154 50 C169 34 202 35 217 59 C241 47 275 54 285 80 C312 74 342 84 358 105 C303 111 239 110 182 111 C125 112 77 108 36 101 Z",
+    wash: "M30 86 C88 48 142 42 199 53 C246 62 300 69 365 98 C304 118 110 119 30 105 Z",
+    top: "M43 81 C57 58 78 56 94 72 C101 42 130 32 154 51 C171 34 202 36 217 60 C241 48 275 56 286 80 C312 74 342 84 358 105",
+    base: "M36 101 C84 108 126 112 182 111 C241 110 303 111 358 105",
+    curls: [
+      "M103 82 C119 70 139 74 141 89 C142 101 123 103 117 92",
+      "M218 81 C235 68 258 73 260 89 C261 103 240 104 233 92",
+    ],
+    under: ["M58 98 C83 91 109 93 132 101", "M271 101 C296 94 324 96 349 105"],
+  },
+  {
+    id: 3,
+    fill: "M22 80 C48 46 90 54 107 78 C119 35 172 18 205 51 C224 27 267 33 279 69 C308 52 359 64 390 103 C335 119 250 115 197 116 C123 117 64 112 22 101 Z",
+    wash: "M18 91 C92 45 152 35 225 49 C293 62 345 73 399 101 C314 128 101 128 18 107 Z",
+    top: "M31 82 C50 51 89 55 108 79 C121 36 170 21 205 52 C225 28 266 35 279 69 C310 53 357 65 390 103",
+    base: "M22 101 C82 111 123 117 197 116 C253 115 336 119 390 103",
+    curls: [
+      "M126 81 C151 57 187 65 188 88 C189 109 157 108 148 92",
+      "M284 82 C306 67 337 72 344 92 C350 109 326 114 314 99",
+    ],
+    under: ["M72 98 C101 88 132 92 162 103", "M218 103 C254 91 291 94 329 106"],
+  },
+  {
+    id: 4,
+    fill: "M45 74 C61 54 91 53 105 73 C111 47 143 37 163 56 C178 39 210 43 222 68 C246 58 282 70 302 99 C252 108 190 106 145 107 C99 108 66 104 45 96 Z",
+    wash: "M40 84 C91 54 137 47 183 55 C230 64 267 73 307 96 C248 116 92 116 40 103 Z",
+    top: "M51 78 C65 56 92 54 105 73 C112 47 143 38 164 56 C179 40 210 44 222 68 C246 59 282 71 302 99",
+    base: "M45 96 C78 104 100 108 145 107 C191 106 253 108 302 99",
+    curls: [
+      "M110 79 C125 67 145 70 147 85 C149 99 128 101 123 90",
+      "M211 78 C229 67 252 73 254 89 C255 103 235 103 228 91",
+    ],
+    under: ["M68 94 C92 88 113 90 136 98", "M231 97 C252 91 275 93 295 101"],
+  },
+];
+
+const MainAtmosphere: React.FC = () => {
+  return (
+    <div className="main-atmosphere" aria-hidden="true">
+      <div className="main-atmosphere__theme main-atmosphere__sky">
+        {skyClouds.map((cloud) => (
+          <svg
+            className={`main-atmosphere__cloud main-atmosphere__cloud--${cloud.id}`}
+            key={cloud.id}
+            viewBox="0 0 420 132"
+            focusable="false"
+          >
+            <path className="main-atmosphere__cloud-wash" d={cloud.wash} />
+            <path className="main-atmosphere__cloud-fill" d={cloud.fill} />
+            <path
+              className="main-atmosphere__cloud-line main-atmosphere__cloud-line--top"
+              d={cloud.top}
+            />
+            <path
+              className="main-atmosphere__cloud-line main-atmosphere__cloud-line--base"
+              d={cloud.base}
+            />
+            {cloud.curls.map((curl) => (
+              <path
+                className="main-atmosphere__cloud-line main-atmosphere__cloud-line--curl"
+                d={curl}
+                key={curl}
+              />
+            ))}
+            {cloud.under.map((under) => (
+              <path
+                className="main-atmosphere__cloud-line main-atmosphere__cloud-line--under"
+                d={under}
+                key={under}
+              />
+            ))}
+          </svg>
+        ))}
+      </div>
+
+      <div className="main-atmosphere__theme main-atmosphere__light">
+        {petals.map((petal) => (
+          <span
+            className={`main-atmosphere__petal main-atmosphere__petal--${petal}`}
+            key={petal}
+          />
+        ))}
+      </div>
+
+      <div className="main-atmosphere__theme main-atmosphere__night">
+        {stars.map((star) => (
+          <span
+            className={`main-atmosphere__star main-atmosphere__star--${star}`}
+            key={star}
+          />
+        ))}
+        {galaxies.map((galaxy) => (
+          <span
+            className={`main-atmosphere__galaxy main-atmosphere__galaxy--${galaxy}`}
+            key={galaxy}
+          >
+            <b />
+            <b />
+            <b />
+            <i />
+            <i />
+            <i />
+            <i />
+            <i />
+            <i />
+            <i />
+          </span>
+        ))}
+      </div>
+
+      <div className="main-atmosphere__theme main-atmosphere__fire">
+        <span className="main-atmosphere__campfire-glow" />
+        {smokePlumes.map((plume) => (
+          <span
+            className={`main-atmosphere__smoke main-atmosphere__smoke--${plume}`}
+            key={plume}
+          />
+        ))}
+        {cinders.map((cinder) => (
+          <span
+            className={`main-atmosphere__cinder main-atmosphere__cinder--${cinder}`}
+            key={cinder}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MainAtmosphere;
diff --git a/src/app/auth/AuthContext.tsx b/src/app/auth/AuthContext.tsx
index 37881d8..dcd3c6f 100644
--- a/src/app/auth/AuthContext.tsx
+++ b/src/app/auth/AuthContext.tsx
@@ -7,6 +7,7 @@ import React, {
 } from "react";
 
 import {
+  apiHuman,
   apiMe,
   apiNonce,
   apiLogout,
@@ -208,13 +209,55 @@ export function useAuth(): AuthContextValue {
 
 export function AuthSidebarPanel() {
   const auth = useAuth();
+  const [activityState, setActivityState] = useState<{
+    governorActive: boolean;
+    humanNodeActive: boolean;
+  } | null>(null);
+
+  useEffect(() => {
+    if (!auth.enabled || !auth.authenticated || !auth.address) {
+      setActivityState(null);
+      return;
+    }
+
+    const address = auth.address;
+    let active = true;
+    const syncActivity = async () => {
+      try {
+        const profile = await apiHuman(address);
+        if (!active) return;
+        setActivityState({
+          governorActive: profile.governorActive,
+          humanNodeActive: profile.humanNodeActive,
+        });
+      } catch {
+        if (!active) return;
+        setActivityState({ governorActive: false, humanNodeActive: false });
+      }
+    };
+
+    void syncActivity();
+    const timer = window.setInterval(() => {
+      void syncActivity();
+    }, 60_000);
+
+    return () => {
+      active = false;
+      window.clearInterval(timer);
+    };
+  }, [auth.address, auth.authenticated, auth.enabled]);
+
   if (!auth.enabled) return null;
 
   const addressLabel = auth.address
     ? shortAddress(auth.address)
     : "Not connected";
-  const gateLabel =
-    auth.authenticated && auth.eligible ? "Active" : "Not active";
+  const humanNodeActive = Boolean(
+    auth.authenticated && activityState?.humanNodeActive,
+  );
+  const governorActive = Boolean(
+    auth.authenticated && activityState?.governorActive,
+  );
 
   const gateError =
     auth.authenticated && !auth.eligible
@@ -232,16 +275,29 @@ export function AuthSidebarPanel() {
         <span className="sidebar__authValue">{addressLabel}</span>
       </div>
       <div className="sidebar__authRow">
-        <span className="sidebar__authKicker">Status</span>
+        <span className="sidebar__authKicker">Human node</span>
+        <span
+          className={
+            humanNodeActive
+              ? "sidebar__authValue sidebar__authValue--ok"
+              : "sidebar__authValue sidebar__authValue--warn"
+          }
+          title={auth.gateReason}
+        >
+          {humanNodeActive ? "Active" : "Not active"}
+        </span>
+      </div>
+      <div className="sidebar__authRow">
+        <span className="sidebar__authKicker">Governor</span>
         <span
           className={
-            auth.authenticated && auth.eligible
+            governorActive
               ? "sidebar__authValue sidebar__authValue--ok"
               : "sidebar__authValue sidebar__authValue--warn"
           }
           title={auth.gateReason}
         >
-          {gateLabel}
+          {governorActive ? "Active" : "Not active"}
         </span>
       </div>
 
diff --git a/src/components/ActivityTile.tsx b/src/components/ActivityTile.tsx
index 1509c5a..3d9e868 100644
--- a/src/components/ActivityTile.tsx
+++ b/src/components/ActivityTile.tsx
@@ -2,6 +2,7 @@ import type { FC } from "react";
 import { Link } from "react-router";
 import { Surface } from "@/components/Surface";
 import { Kicker } from "@/components/Kicker";
+import { GlassyStatusChip } from "@/components/GlassySection";
 import { cn } from "@/lib/utils";
 import { ACTIVITY_TILE_CLASS, formatActivityTimestamp } from "@/lib/profileUi";
 import type { GovernanceActionDto } from "@/types/api";
@@ -18,21 +19,27 @@ export const ActivityTile: FC<ActivityTileProps> = ({ action, className }) => {
       radius="xl"
       shadow="tile"
       className={cn(
-        "space-y-1 px-3 py-3 text-center transition hover:-translate-y-0.5 hover:shadow-card",
+        "grid gap-2 px-3 py-3 text-left transition hover:-translate-y-0.5 hover:shadow-card",
         ACTIVITY_TILE_CLASS,
         className,
       )}
     >
-      <Kicker align="center" className="line-clamp-1 text-primary">
-        {action.action}
-      </Kicker>
-      <p className="line-clamp-1 text-base font-semibold text-text">
+      <div className="flex min-w-0 items-start justify-between gap-2">
+        <Kicker className="max-h-[1.3em] overflow-hidden text-primary">
+          {action.action}
+        </Kicker>
+        <GlassyStatusChip className="shrink-0 text-[0.66rem]">
+          {formatActivityTimestamp(action.timestamp)}
+        </GlassyStatusChip>
+      </div>
+      <p className="max-h-[2.7em] overflow-hidden text-sm leading-[1.35] font-semibold text-text">
         {action.title}
       </p>
-      <p className="line-clamp-2 text-xs text-muted">{action.context}</p>
-      <p className="line-clamp-2 text-xs text-muted">{action.detail}</p>
-      <p className="text-[11px] text-muted">
-        {formatActivityTimestamp(action.timestamp)}
+      <p className="max-h-[2.8em] overflow-hidden text-xs leading-[1.4] text-muted">
+        {action.context}
+      </p>
+      <p className="max-h-[2.8em] overflow-hidden text-xs leading-[1.4] text-muted">
+        {action.detail}
       </p>
     </Surface>
   );
diff --git a/src/components/AppCard.tsx b/src/components/AppCard.tsx
index 5c85d00..221f720 100644
--- a/src/components/AppCard.tsx
+++ b/src/components/AppCard.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { cn } from "@/lib/utils";
+import { GlassyCard } from "@/components/GlassyCard";
 import {
   Card,
   CardContent,
@@ -14,6 +15,7 @@ type AppCardProps = {
   children: React.ReactNode;
   footer?: React.ReactNode;
   className?: string;
+  surface?: "panel" | "glass";
 };
 
 export const AppCard: React.FC<AppCardProps> = ({
@@ -22,9 +24,12 @@ export const AppCard: React.FC<AppCardProps> = ({
   children,
   footer,
   className,
+  surface = "panel",
 }) => {
+  const Root = surface === "glass" ? GlassyCard : Card;
+
   return (
-    <Card className={cn("h-full", className)}>
+    <Root className={cn("h-full", className)}>
       <CardHeader className="relative pb-0">
         {badge ? (
           <div className="absolute top-4 right-4 z-10">{badge}</div>
@@ -37,7 +42,7 @@ export const AppCard: React.FC<AppCardProps> = ({
       <CardContent className="space-y-4 pt-2">{children}</CardContent>
 
       {footer ? <CardFooter className="pt-0">{footer}</CardFooter> : null}
-    </Card>
+    </Root>
   );
 };
 
diff --git a/src/components/AvatarPlaceholder.tsx b/src/components/AvatarPlaceholder.tsx
index 818967e..8ae65c8 100644
--- a/src/components/AvatarPlaceholder.tsx
+++ b/src/components/AvatarPlaceholder.tsx
@@ -24,7 +24,7 @@ export const AvatarPlaceholder: React.FC<AvatarPlaceholderProps> = ({
   return (
     <div
       className={cn(
-        "flex items-center justify-center rounded-full border-4 border-border bg-panel-alt font-semibold text-muted shadow-inner",
+        "flex items-center justify-center rounded-full border-4 border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] font-semibold text-muted shadow-inner supports-[backdrop-filter]:backdrop-blur-md",
         sizeClasses[size],
         className,
       )}
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
new file mode 100644
index 0000000..068140e
--- /dev/null
+++ b/src/components/Chip.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type ChipProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function Chip({ children, className }: ChipProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex min-h-7 items-center rounded-full px-3.5 py-1 text-xs leading-none font-semibold tracking-wide",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/src/components/CmEconomyPanel.tsx b/src/components/CmEconomyPanel.tsx
index bc86d96..083cd52 100644
--- a/src/components/CmEconomyPanel.tsx
+++ b/src/components/CmEconomyPanel.tsx
@@ -1,7 +1,12 @@
-import { Badge } from "@/components/primitives/badge";
-import { Surface } from "@/components/Surface";
-import { Kicker } from "@/components/Kicker";
-import { SectionHeader } from "@/components/SectionHeader";
+import {
+  GlassyCompactGrid,
+  GlassyCompactMetric,
+  GlassyCompactRow,
+  GlassyKeyValue,
+  GlassySection,
+  GlassyStatusChip,
+  GlassyTile,
+} from "@/components/GlassySection";
 import type {
   CmChamberBreakdownDto,
   CmHistoryItemDto,
@@ -9,104 +14,183 @@ import type {
 } from "@/types/api";
 
 type CmEconomyPanelProps = {
-  totals: CmTotalsDto;
   chambers: CmChamberBreakdownDto[];
   history: CmHistoryItemDto[];
+  className?: string;
   mmValue?: number | string;
+  totalsScope?: "full" | "personal";
   title?: string;
+  totals: CmTotalsDto;
 };
 
 export const CmEconomyPanel: React.FC<CmEconomyPanelProps> = ({
-  totals,
   chambers,
+  className,
   history,
   mmValue = "—",
-  title = "CM + MM",
+  totalsScope = "full",
+  title,
+  totals,
 }) => {
-  const tiles: Array<{ label: string; value: number | string }> = [
-    { label: "LCM", value: totals.lcm },
-    { label: "MCM", value: totals.mcm },
-    { label: "ACM", value: totals.acm },
-    { label: "MM", value: mmValue },
-  ];
+  const displayTitle = title ?? "CM + MM";
+  const personalMmValue = mmValue === "—" ? totals.acm : mmValue;
+  const tiles: Array<{ label: string; value: number | string }> =
+    totalsScope === "personal"
+      ? [
+          { label: "ACM", value: totals.acm },
+          { label: "MM", value: personalMmValue },
+        ]
+      : [
+          { label: "LCM", value: totals.lcm },
+          { label: "MCM", value: totals.mcm },
+          { label: "Members' ACM", value: totals.acm },
+          { label: "MM", value: mmValue },
+        ];
+  const formattedValue = (value: number | string) =>
+    typeof value === "number" ? value.toLocaleString() : value;
+
+  if (totalsScope === "personal") {
+    return (
+      <GlassySection className={className} title={displayTitle}>
+        <div className="grid h-full gap-2">
+          <GlassyCompactGrid>
+            {tiles.map((tile) => (
+              <GlassyCompactMetric
+                key={tile.label}
+                label={tile.label}
+                value={formattedValue(tile.value)}
+              />
+            ))}
+          </GlassyCompactGrid>
+          {chambers.length === 0 ? (
+            <GlassyTile className="px-4 py-3 text-sm text-muted">
+              No CM chambers yet.
+            </GlassyTile>
+          ) : (
+            <GlassyCompactGrid>
+              {chambers.map((chamber) => (
+                <GlassyCompactRow
+                  className="cm-economy-row"
+                  key={chamber.chamberId}
+                  title={chamber.chamberTitle}
+                  actions={
+                    <GlassyStatusChip tone="primary">
+                      M × {chamber.multiplier}
+                    </GlassyStatusChip>
+                  }
+                >
+                  <div className="cm-economy-row__metrics">
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="LCM"
+                      value={chamber.lcm}
+                    />
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="MCM"
+                      value={chamber.mcm}
+                    />
+                  </div>
+                </GlassyCompactRow>
+              ))}
+            </GlassyCompactGrid>
+          )}
+        </div>
+      </GlassySection>
+    );
+  }
 
   return (
-    <div className="space-y-4">
-      <SectionHeader>{title}</SectionHeader>
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+    <GlassySection className={className} title={displayTitle}>
+      <GlassyCompactGrid className="lg:grid-cols-4">
         {tiles.map((tile) => (
-          <Surface
+          <GlassyCompactMetric
             key={tile.label}
-            variant="panelAlt"
-            radius="xl"
-            shadow="tile"
-            className="px-4 py-3 text-center"
-          >
-            <Kicker align="center">{tile.label}</Kicker>
-            <p className="text-xl font-semibold text-text">
-              {typeof tile.value === "number"
-                ? tile.value.toLocaleString()
-                : tile.value}
-            </p>
-          </Surface>
+            label={tile.label}
+            value={formattedValue(tile.value)}
+          />
         ))}
-      </div>
+      </GlassyCompactGrid>
+
       <div className="grid gap-3 md:grid-cols-2">
-        <Surface
-          variant="panelAlt"
-          radius="xl"
-          shadow="tile"
-          className="px-4 py-3"
-        >
-          <Kicker>Chamber breakdown</Kicker>
+        <GlassyTile className="grid gap-3">
+          <p className="glassy-tile-heading">Chamber breakdown</p>
           {chambers.length === 0 ? (
-            <p className="mt-2 text-sm text-muted">No CM chambers yet.</p>
+            <p className="text-sm text-muted">No CM chambers yet.</p>
           ) : (
-            <ul className="mt-2 space-y-2 text-sm text-text">
+            <div className="grid gap-2">
               {chambers.map((chamber) => (
-                <li key={chamber.chamberId} className="flex flex-col gap-1">
-                  <div className="flex items-center justify-between">
-                    <span className="font-semibold">
-                      {chamber.chamberTitle}
-                    </span>
-                    <Badge variant="outline">M × {chamber.multiplier}</Badge>
+                <GlassyCompactRow
+                  key={chamber.chamberId}
+                  title={chamber.chamberTitle}
+                  actions={
+                    <GlassyStatusChip tone="primary">
+                      M × {chamber.multiplier}
+                    </GlassyStatusChip>
+                  }
+                >
+                  <div className="grid grid-cols-3 gap-2">
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="LCM"
+                      value={chamber.lcm}
+                    />
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="MCM"
+                      value={chamber.mcm}
+                    />
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="Members' ACM"
+                      value={chamber.acm}
+                    />
                   </div>
-                  <span className="text-xs text-muted">
-                    LCM {chamber.lcm} · MCM {chamber.mcm} · ACM {chamber.acm}
-                  </span>
-                </li>
+                </GlassyCompactRow>
               ))}
-            </ul>
+            </div>
           )}
-        </Surface>
+        </GlassyTile>
 
-        <Surface
-          variant="panelAlt"
-          radius="xl"
-          shadow="tile"
-          className="px-4 py-3"
-        >
-          <Kicker>Recent CM awards</Kicker>
+        <GlassyTile className="grid gap-3">
+          <p className="glassy-tile-heading">Recent CM awards</p>
           {history.length === 0 ? (
-            <p className="mt-2 text-sm text-muted">No CM awards yet.</p>
+            <p className="text-sm text-muted">No CM awards yet.</p>
           ) : (
-            <ul className="mt-2 space-y-2 text-sm text-text">
+            <div className="grid gap-2">
               {history.slice(0, 5).map((item) => (
-                <li
+                <GlassyCompactRow
                   key={`${item.proposalId}-${item.awardedAt}`}
-                  className="flex flex-col gap-1"
+                  title={item.title}
+                  actions={
+                    <GlassyStatusChip tone="primary">
+                      M × {item.multiplier}
+                    </GlassyStatusChip>
+                  }
                 >
-                  <span className="font-semibold">{item.title}</span>
-                  <span className="text-xs text-muted">
-                    {item.chamberId} · M × {item.multiplier} · LCM {item.lcm} ·
-                    MCM {item.mcm}
-                  </span>
-                </li>
+                  <div className="grid grid-cols-3 gap-2">
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="Chamber"
+                      value={item.chamberId}
+                    />
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="LCM"
+                      value={item.lcm}
+                    />
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="MCM"
+                      value={item.mcm}
+                    />
+                  </div>
+                </GlassyCompactRow>
               ))}
-            </ul>
+            </div>
           )}
-        </Surface>
+        </GlassyTile>
       </div>
-    </div>
+    </GlassySection>
   );
 };
diff --git a/src/components/CourtStatusBadge.tsx b/src/components/CourtStatusBadge.tsx
index 26b79c6..a779313 100644
--- a/src/components/CourtStatusBadge.tsx
+++ b/src/components/CourtStatusBadge.tsx
@@ -5,7 +5,7 @@ import type { CourtCaseStatusDto } from "@/types/api";
 const statusClasses: Record<CourtCaseStatusDto, string> = {
   jury: "bg-[color:var(--accent)]/15 text-[var(--accent)]",
   live: "bg-[color:var(--pagehint)]/15 text-[color:var(--pagehint)]",
-  ended: "bg-panel-alt text-muted",
+  ended: "bg-[color:var(--control-glass-bg)] text-muted",
 };
 
 const statusLabels: Record<CourtCaseStatusDto, string> = {
diff --git a/src/components/ExpandableCard.tsx b/src/components/ExpandableCard.tsx
index 58fc731..5b27907 100644
--- a/src/components/ExpandableCard.tsx
+++ b/src/components/ExpandableCard.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 
 import { Card } from "@/components/primitives/card";
+import { GlassyCard } from "@/components/GlassyCard";
 import { Kicker } from "@/components/Kicker";
 import { cn } from "@/lib/utils";
 
@@ -14,6 +15,7 @@ type ExpandableCardProps = {
   right: ReactNode;
   children: ReactNode;
   className?: string;
+  surface?: "solid" | "glass";
 };
 
 export function ExpandableCard({
@@ -24,14 +26,13 @@ export function ExpandableCard({
   right,
   children,
   className,
+  surface = "solid",
 }: ExpandableCardProps) {
-  return (
-    <Card
-      className={cn("overflow-hidden border border-border bg-panel", className)}
-    >
+  const content = (
+    <>
       <button
         type="button"
-        className="flex w-full flex-col gap-4 px-5 py-4 text-left transition hover:bg-panel-alt sm:flex-row sm:items-center sm:justify-between"
+        className="flex w-full flex-col gap-4 px-5 py-4 text-left transition hover:bg-[color:var(--surface-glass-hover-bg)] sm:flex-row sm:items-center sm:justify-between"
         aria-expanded={expanded}
         onClick={onToggle}
       >
@@ -55,6 +56,12 @@ export function ExpandableCard({
           {children}
         </div>
       ) : null}
-    </Card>
+    </>
   );
+
+  if (surface === "glass") {
+    return <GlassyCard className={className}>{content}</GlassyCard>;
+  }
+
+  return <Card className={cn("overflow-hidden", className)}>{content}</Card>;
 }
diff --git a/src/components/GlassyCard.tsx b/src/components/GlassyCard.tsx
new file mode 100644
index 0000000..d63d032
--- /dev/null
+++ b/src/components/GlassyCard.tsx
@@ -0,0 +1,25 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Surface } from "@/components/Surface";
+
+type GlassyCardProps = React.HTMLAttributes<HTMLElement> & {
+  as?: "article" | "div";
+};
+
+export function GlassyCard({
+  as = "div",
+  className,
+  ...props
+}: GlassyCardProps) {
+  return (
+    <Surface
+      as={as}
+      variant="glass"
+      radius="2xl"
+      shadow="card"
+      className={cn("overflow-hidden", className)}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/GlassyRecordCard.css b/src/components/GlassyRecordCard.css
new file mode 100644
index 0000000..054fce6
--- /dev/null
+++ b/src/components/GlassyRecordCard.css
@@ -0,0 +1,211 @@
+:root {
+  --record-rail-idle: color-mix(in srgb, var(--border), var(--primary) 18%);
+  --record-rail-recent: var(--accent-warm);
+  --record-rail-action: var(--accent);
+}
+
+:root[data-theme="light"] {
+  --record-rail-idle: rgba(17, 24, 39, 0.18);
+  --record-rail-recent: #f4b37f;
+  --record-rail-action: #5bc2b5;
+}
+
+:root[data-theme="night"] {
+  --record-rail-idle: rgba(111, 168, 255, 0.28);
+  --record-rail-recent: rgba(244, 179, 127, 0.9);
+  --record-rail-action: rgba(91, 194, 181, 0.95);
+}
+
+:root[data-theme="fire"] {
+  --record-rail-idle: rgba(255, 138, 31, 0.28);
+  --record-rail-recent: rgba(255, 209, 102, 0.94);
+  --record-rail-action: rgba(255, 61, 0, 0.96);
+}
+
+.glassy-record-card {
+  --record-row-hover: color-mix(in srgb, var(--panel), var(--primary) 5%);
+  --record-row-open: color-mix(in srgb, var(--panel), var(--primary) 7%);
+  --record-title-hover: color-mix(in srgb, var(--accent), var(--primary) 20%);
+  --record-meta-bg: color-mix(in srgb, var(--panel-alt), var(--primary) 8%);
+  --record-meta-text: color-mix(in srgb, var(--muted), var(--primary) 20%);
+  --record-time-text: color-mix(in srgb, var(--muted), var(--primary) 12%);
+
+  position: relative;
+  padding-left: 1.35rem;
+}
+
+:root[data-theme="light"] .glassy-record-card {
+  --record-row-hover: #f7faff;
+  --record-row-open: #f8fbff;
+  --record-title-hover: #4f6ad7;
+  --record-meta-bg: #f7faff;
+  --record-meta-text: #4f5f82;
+  --record-time-text: #6b7280;
+}
+
+:root[data-theme="night"] .glassy-record-card {
+  --record-row-hover: rgba(111, 168, 255, 0.06);
+  --record-row-open: rgba(111, 168, 255, 0.08);
+  --record-title-hover: #82b6ff;
+  --record-meta-bg: rgba(111, 168, 255, 0.09);
+  --record-meta-text: #d4def4;
+  --record-time-text: #a3a3a3;
+}
+
+:root[data-theme="fire"] .glassy-record-card {
+  --record-row-hover: rgba(255, 104, 0, 0.08);
+  --record-row-open: rgba(255, 104, 0, 0.12);
+  --record-title-hover: #ffb35c;
+  --record-meta-bg: rgba(255, 138, 31, 0.13);
+  --record-meta-text: #ffd2a2;
+  --record-time-text: #d8aa82;
+}
+
+.glassy-record-card::before {
+  content: "";
+  position: absolute;
+  top: 0.9rem;
+  bottom: 0.9rem;
+  left: 0;
+  width: 2px;
+  background: var(--record-rail-idle);
+}
+
+.glassy-record-card--recent::before {
+  background: var(--record-rail-recent);
+}
+
+.glassy-record-card--action::before,
+.glassy-record-card--open::before {
+  background: var(--record-rail-action);
+}
+
+.glassy-record-card--open {
+  background: var(--record-row-open);
+}
+
+.glassy-record-card__button {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) 30rem;
+  gap: 1rem;
+  border: 0;
+  background: transparent;
+  padding: 0.82rem 1rem 0.82rem 0;
+  color: inherit;
+  text-align: left;
+}
+
+.glassy-record-card__button:hover {
+  background: var(--record-row-hover);
+}
+
+.glassy-record-card__button:hover .glassy-record-card__title {
+  color: var(--record-title-hover);
+}
+
+.glassy-record-card__copy,
+.glassy-record-card__aside {
+  min-width: 0;
+  display: flex;
+}
+
+.glassy-record-card__copy {
+  flex-direction: column;
+  gap: 0.28rem;
+}
+
+.glassy-record-card__aside {
+  display: grid;
+  grid-template-columns: 8.75rem 8.75rem 8.75rem 1.25rem;
+  align-items: center;
+  justify-content: end;
+  gap: 0.65rem;
+}
+
+.glassy-record-card__titleRow {
+  min-width: 0;
+}
+
+.glassy-record-card__metaPill {
+  width: 100%;
+  justify-content: center;
+  color: var(--record-meta-text);
+  background: var(--record-meta-bg);
+  white-space: nowrap;
+}
+
+.glassy-record-card__title {
+  min-width: 0;
+  color: var(--text);
+  font-size: 1.08rem;
+  font-weight: 800;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+  transition: color 160ms ease;
+}
+
+.glassy-record-card__summary {
+  max-width: 52rem;
+  min-height: 1.45em;
+  max-height: 1.45em;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.glassy-record-card__stage {
+  width: 100%;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.glassy-record-card__time {
+  color: var(--record-time-text);
+  font-size: 0.72rem;
+  white-space: nowrap;
+  font-weight: 700;
+  text-align: right;
+}
+
+.glassy-record-card__chevron {
+  width: 1.1rem;
+  height: 1.1rem;
+  color: var(--muted);
+  transition: transform 160ms ease;
+}
+
+.glassy-record-card__chevron--open {
+  transform: rotate(180deg);
+}
+
+.glassy-record-card__details {
+  padding: 0 1rem 1rem 0;
+}
+
+@media (max-width: 760px) {
+  .glassy-record-card__button {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+
+  .glassy-record-card__aside {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 1.25rem;
+    justify-content: stretch;
+  }
+
+  .glassy-record-card__time {
+    grid-column: 1 / 3;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glassy-record-card__title,
+  .glassy-record-card__chevron {
+    transition: none;
+  }
+}
diff --git a/src/components/GlassyRecordCard.tsx b/src/components/GlassyRecordCard.tsx
new file mode 100644
index 0000000..b85f947
--- /dev/null
+++ b/src/components/GlassyRecordCard.tsx
@@ -0,0 +1,92 @@
+import type { ReactNode } from "react";
+
+import { ChevronDown } from "lucide-react";
+
+import { Chip } from "@/components/Chip";
+import { GlassyCard } from "@/components/GlassyCard";
+import { StageChip } from "@/components/StageChip";
+import { proposalSummaryPreview } from "@/lib/textPreview";
+import { cn } from "@/lib/utils";
+import type { Stage } from "@/types/stages";
+import "./GlassyRecordCard.css";
+
+type GlassyRecordCardProps = {
+  children: ReactNode;
+  className?: string;
+  dateText?: ReactNode;
+  expanded: boolean;
+  meta?: ReactNode;
+  onToggle: () => void;
+  rail?: "action" | "idle" | "recent";
+  stage: Stage;
+  stageLabel?: ReactNode;
+  summary: ReactNode;
+  title: ReactNode;
+};
+
+export function GlassyRecordCard({
+  children,
+  className,
+  dateText,
+  expanded,
+  meta,
+  onToggle,
+  rail = "idle",
+  stage,
+  stageLabel,
+  summary,
+  title,
+}: GlassyRecordCardProps) {
+  const renderedSummary =
+    typeof summary === "string" ? proposalSummaryPreview(summary) : summary;
+
+  return (
+    <GlassyCard
+      as="article"
+      className={cn(
+        "glassy-record-card",
+        expanded && "glassy-record-card--open",
+        rail === "action" && "glassy-record-card--action",
+        rail === "recent" && "glassy-record-card--recent",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        className="glassy-record-card__button"
+        aria-expanded={expanded}
+        onClick={onToggle}
+      >
+        <span className="glassy-record-card__copy">
+          <span className="glassy-record-card__titleRow">
+            <span className="glassy-record-card__title">{title}</span>
+          </span>
+          <span className="glassy-record-card__summary">{renderedSummary}</span>
+        </span>
+        <span className="glassy-record-card__aside">
+          {meta ? (
+            <Chip className="glassy-record-card__metaPill">{meta}</Chip>
+          ) : null}
+          <StageChip
+            stage={stage}
+            label={stageLabel}
+            className="glassy-record-card__stage"
+          />
+          {dateText ? (
+            <span className="glassy-record-card__time">{dateText}</span>
+          ) : null}
+          <ChevronDown
+            className={cn(
+              "glassy-record-card__chevron",
+              expanded && "glassy-record-card__chevron--open",
+            )}
+          />
+        </span>
+      </button>
+
+      {expanded ? (
+        <div className="glassy-record-card__details">{children}</div>
+      ) : null}
+    </GlassyCard>
+  );
+}
diff --git a/src/components/GlassySection.css b/src/components/GlassySection.css
new file mode 100644
index 0000000..90681a7
--- /dev/null
+++ b/src/components/GlassySection.css
@@ -0,0 +1,552 @@
+.glassy-section {
+  --glassy-section-title: color-mix(in srgb, var(--text), var(--primary) 10%);
+  --glassy-section-rule: color-mix(in srgb, var(--primary), transparent 58%);
+  --glassy-section-rule-soft: color-mix(
+    in srgb,
+    var(--primary),
+    transparent 91%
+  );
+  --glassy-tile-hover: color-mix(in srgb, var(--panel), var(--primary) 6%);
+  --glassy-tile-shine: rgba(255, 255, 255, 0.32);
+  --glassy-metric-label: color-mix(in srgb, var(--muted), var(--primary) 12%);
+  --glassy-metric-value: color-mix(in srgb, var(--text), var(--primary) 12%);
+  --glassy-status-bg: color-mix(in srgb, var(--panel-alt), var(--primary) 8%);
+  --glassy-status-border: color-mix(in srgb, var(--border), var(--primary) 26%);
+  --glassy-status-text: color-mix(in srgb, var(--muted), var(--primary) 26%);
+  --glassy-progress-track: color-mix(in srgb, var(--panel-alt), var(--text) 5%);
+  --glassy-progress-bar: color-mix(in srgb, var(--primary), var(--accent) 18%);
+  --glassy-picker-title: color-mix(in srgb, var(--text), var(--primary) 8%);
+  --glassy-picker-eyebrow: color-mix(in srgb, var(--muted), var(--primary) 22%);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+:root[data-theme="light"] .glassy-section {
+  --glassy-section-title: #1f2937;
+  --glassy-section-rule: rgba(79, 106, 215, 0.28);
+  --glassy-section-rule-soft: rgba(79, 106, 215, 0.05);
+  --glassy-tile-hover: #f7faff;
+  --glassy-tile-shine: rgba(255, 255, 255, 0.68);
+  --glassy-metric-label: #5b6578;
+  --glassy-metric-value: #27324a;
+  --glassy-status-bg: #f7faff;
+  --glassy-status-border: rgba(79, 106, 215, 0.2);
+  --glassy-status-text: #4f5f82;
+  --glassy-progress-track: #edf3ff;
+  --glassy-progress-bar: #6fa8ff;
+  --glassy-picker-title: #111827;
+  --glassy-picker-eyebrow: #536179;
+}
+
+:root[data-theme="night"] .glassy-section {
+  --glassy-section-title: #f5f5f5;
+  --glassy-section-rule: rgba(111, 168, 255, 0.34);
+  --glassy-section-rule-soft: rgba(111, 168, 255, 0.06);
+  --glassy-tile-hover: rgba(111, 168, 255, 0.06);
+  --glassy-tile-shine: rgba(255, 255, 255, 0.06);
+  --glassy-metric-label: #b7c2d6;
+  --glassy-metric-value: #f5f5f5;
+  --glassy-status-bg: rgba(111, 168, 255, 0.09);
+  --glassy-status-border: rgba(111, 168, 255, 0.24);
+  --glassy-status-text: #d4def4;
+  --glassy-progress-track: rgba(255, 255, 255, 0.08);
+  --glassy-progress-bar: #82b6ff;
+  --glassy-picker-title: #ffffff;
+  --glassy-picker-eyebrow: #c7d4ec;
+}
+
+:root[data-theme="fire"] .glassy-section {
+  --glassy-section-title: #fff7ed;
+  --glassy-section-rule: rgba(255, 138, 31, 0.42);
+  --glassy-section-rule-soft: rgba(255, 89, 0, 0.12);
+  --glassy-tile-hover: rgba(255, 104, 0, 0.08);
+  --glassy-tile-shine: rgba(255, 209, 102, 0.1);
+  --glassy-metric-label: #d8aa82;
+  --glassy-metric-value: #fff7ed;
+  --glassy-status-bg: rgba(255, 138, 31, 0.12);
+  --glassy-status-border: rgba(255, 138, 31, 0.3);
+  --glassy-status-text: #ffd2a2;
+  --glassy-progress-track: rgba(255, 226, 194, 0.09);
+  --glassy-progress-bar: #ff8a1f;
+  --glassy-picker-title: #fff7ed;
+  --glassy-picker-eyebrow: #f6bf91;
+}
+
+.glassy-section__title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin: 0;
+  color: var(--glassy-section-title);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.glassy-section__title::before {
+  content: "";
+  width: 0.24rem;
+  height: 1.15rem;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--glassy-section-rule);
+  box-shadow: 0 0 0 0.28rem var(--glassy-section-rule-soft);
+}
+
+.glassy-tile {
+  position: relative;
+  overflow: hidden;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.glassy-tile::after {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto;
+  height: 42%;
+  pointer-events: none;
+  border-radius: inherit;
+  background: linear-gradient(
+    180deg,
+    var(--glassy-tile-shine),
+    transparent 72%
+  );
+  opacity: 0.28;
+}
+
+.glassy-tile > * {
+  position: relative;
+  z-index: 1;
+}
+
+.glassy-tile:hover {
+  background-color: var(--glassy-tile-hover);
+}
+
+.glassy-metric-tile {
+  gap: 0.25rem;
+}
+
+.glassy-metric-tile__label {
+  margin: 0;
+  color: var(--glassy-metric-label);
+  font-size: 0.78rem;
+  font-weight: 550;
+  line-height: 1.25;
+}
+
+.glassy-metric-tile__value {
+  margin: 0;
+  color: var(--glassy-metric-value);
+  font-size: 1.18rem;
+  font-weight: 650;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.glassy-compact-metric {
+  min-height: 4.2rem;
+  justify-content: center;
+  padding: 0.65rem 0.75rem;
+  text-align: center;
+}
+
+.glassy-compact-metric__label {
+  margin: 0;
+  color: var(--glassy-metric-label);
+  font-size: 0.72rem;
+  font-weight: 550;
+  line-height: 1.25;
+}
+
+.glassy-compact-metric__value {
+  margin: 0.1rem 0 0;
+  color: var(--glassy-metric-value);
+  font-size: 0.96rem;
+  font-weight: 650;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.glassy-compact-metric--inline {
+  min-height: 3.1rem;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  text-align: left;
+}
+
+.glassy-compact-metric--inline .glassy-compact-metric__value {
+  margin: 0;
+}
+
+.glassy-compact-grid {
+  display: grid;
+  gap: 0.65rem;
+}
+
+@media (min-width: 640px) {
+  .glassy-compact-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.glassy-compact-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.6rem;
+  align-items: start;
+  padding: 0.72rem 0.78rem;
+}
+
+.glassy-compact-row__header {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.55rem;
+}
+
+.glassy-compact-row__main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.glassy-compact-row__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.35rem;
+}
+
+.glassy-tile-heading {
+  margin: 0;
+  color: var(--glassy-metric-value);
+  font-size: 0.86rem;
+  font-weight: 550;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.glassy-key-value {
+  display: inline-flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.3rem;
+  font-size: 0.74rem;
+  line-height: 1.25;
+  white-space: normal;
+}
+
+.glassy-key-value__label {
+  color: var(--glassy-metric-label);
+}
+
+.glassy-key-value__value {
+  color: var(--glassy-metric-value);
+  font-weight: 600;
+}
+
+.glassy-key-value--stacked {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.08rem;
+}
+
+.glassy-key-value--metric {
+  min-height: 3rem;
+  justify-content: center;
+  border-radius: 0.7rem;
+  background: color-mix(in srgb, var(--panel-alt), transparent 22%);
+  padding: 0.48rem 0.55rem;
+}
+
+.glassy-key-value--metric .glassy-key-value__label {
+  font-size: 0.66rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.glassy-key-value--metric .glassy-key-value__value {
+  font-size: 0.88rem;
+}
+
+.cm-economy-row__metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.cm-economy-row__metrics .glassy-key-value--metric {
+  align-items: center;
+  text-align: center;
+}
+
+.cm-economy-row__metrics .glassy-key-value__label,
+.cm-economy-row__metrics .glassy-key-value__value {
+  width: 100%;
+  text-align: center;
+}
+
+.glassy-compact-address {
+  min-width: 0;
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--panel-alt), transparent 22%);
+  padding: 0.5rem 0.65rem;
+}
+
+.glassy-compact-command-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.45rem;
+  align-items: center;
+}
+
+.glassy-compact-command-row__actions {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.35rem;
+}
+
+.glassy-picker-modal {
+  --glassy-tile-hover: var(--surface-glass-bg);
+
+  border: 1px solid color-mix(in srgb, var(--primary), transparent 72%);
+  box-shadow:
+    0 28px 80px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 color-mix(in srgb, white, transparent 76%);
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.glassy-picker-modal:hover {
+  background-color: var(--surface-glass-bg);
+}
+
+.glassy-picker-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.glassy-picker-modal__eyebrow {
+  margin: 0;
+  color: var(--glassy-picker-eyebrow);
+  font-size: 0.72rem;
+  font-weight: 600;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.glassy-picker-modal__title {
+  margin: 0.18rem 0 0;
+  color: var(--glassy-picker-title);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.glassy-picker-search {
+  border: 1px solid color-mix(in srgb, var(--border), transparent 28%);
+  border-radius: 0.95rem;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--panel-alt), white 6%),
+    color-mix(in srgb, var(--panel-alt), transparent 18%)
+  );
+  padding: 0.45rem;
+}
+
+.glassy-picker-search__input {
+  height: 2.35rem;
+  border-color: color-mix(in srgb, var(--border), transparent 36%);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--panel), transparent 18%);
+  box-shadow: none;
+}
+
+.glassy-picker-empty {
+  border-radius: 0.85rem;
+  background: color-mix(in srgb, var(--panel-alt), transparent 22%);
+  color: var(--muted);
+  padding: 0.8rem 0.9rem;
+  font-size: 0.9rem;
+}
+
+.glassy-picker-list {
+  display: grid;
+  gap: 0.65rem;
+  max-height: min(28rem, 62vh);
+  overflow: auto;
+  padding-right: 0.2rem;
+  scrollbar-width: none;
+}
+
+.glassy-picker-list::-webkit-scrollbar {
+  display: none;
+}
+
+.glassy-picker-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.9rem;
+  align-items: center;
+  border: 1px solid color-mix(in srgb, var(--border), transparent 28%);
+  border-radius: 0.95rem;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--panel-alt), white 5%),
+    color-mix(in srgb, var(--panel-alt), transparent 28%)
+  );
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 86%);
+  padding: 0.75rem;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.glassy-picker-row:hover {
+  border-color: color-mix(in srgb, var(--primary), transparent 52%);
+  background-color: color-mix(in srgb, var(--panel-alt), var(--primary) 7%);
+  transform: translateY(-1px);
+}
+
+.glassy-picker-row__main {
+  min-width: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.glassy-picker-row__nameLine {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.glassy-picker-row__name {
+  margin: 0;
+  color: var(--glassy-metric-value);
+  font-size: 0.94rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.glassy-picker-row__metrics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+}
+
+.glassy-status-chip {
+  display: inline-flex;
+  min-height: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  border: 1px solid var(--glassy-status-border);
+  border-radius: 999px;
+  background: var(--glassy-status-bg);
+  color: var(--glassy-status-text);
+  padding: 0.25rem 0.7rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.glassy-status-chip--primary {
+  --glassy-status-bg: var(--primary-dim);
+  --glassy-status-border: color-mix(in srgb, var(--primary), transparent 58%);
+  --glassy-status-text: var(--primary);
+}
+
+.glassy-status-chip--ok {
+  --glassy-status-bg: color-mix(in srgb, var(--ok), transparent 86%);
+  --glassy-status-border: color-mix(in srgb, var(--ok), transparent 64%);
+  --glassy-status-text: color-mix(in srgb, var(--ok), var(--text) 12%);
+}
+
+.glassy-status-chip--warn {
+  --glassy-status-bg: color-mix(in srgb, var(--accent-warm), transparent 82%);
+  --glassy-status-border: color-mix(
+    in srgb,
+    var(--accent-warm),
+    transparent 56%
+  );
+  --glassy-status-text: color-mix(in srgb, var(--accent-warm), var(--text) 22%);
+}
+
+.glassy-status-chip--danger {
+  --glassy-status-bg: color-mix(in srgb, var(--danger), transparent 88%);
+  --glassy-status-border: color-mix(in srgb, var(--danger), transparent 64%);
+  --glassy-status-text: color-mix(in srgb, var(--danger), var(--text) 8%);
+}
+
+.glassy-progress {
+  height: 0.5rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--glassy-progress-track);
+}
+
+.glassy-progress__bar {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--glassy-progress-bar);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glassy-tile {
+    transition: none;
+  }
+
+  .glassy-picker-row {
+    transition: none;
+  }
+
+  .glassy-picker-row:hover {
+    transform: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .glassy-compact-row {
+    grid-template-columns: 1fr;
+  }
+
+  .glassy-compact-row__actions {
+    justify-content: flex-start;
+  }
+
+  .glassy-compact-command-row {
+    grid-template-columns: 1fr;
+  }
+
+  .glassy-compact-command-row__actions {
+    grid-auto-flow: column;
+    justify-content: start;
+  }
+
+  .glassy-picker-modal__header,
+  .glassy-picker-row {
+    grid-template-columns: 1fr;
+  }
+
+  .glassy-picker-modal__header {
+    display: grid;
+  }
+}
diff --git a/src/components/GlassySection.tsx b/src/components/GlassySection.tsx
new file mode 100644
index 0000000..11eb90a
--- /dev/null
+++ b/src/components/GlassySection.tsx
@@ -0,0 +1,206 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+import { SectionHeader } from "@/components/SectionHeader";
+import { Surface } from "@/components/Surface";
+import "./GlassySection.css";
+
+type GlassySectionProps = {
+  children: ReactNode;
+  className?: string;
+  title: ReactNode;
+};
+
+type GlassyTileProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+type GlassyMetricTileProps = {
+  className?: string;
+  label: ReactNode;
+  value: ReactNode;
+};
+
+type GlassyCompactMetricProps = {
+  className?: string;
+  label: ReactNode;
+  value: ReactNode;
+};
+
+type GlassyCompactGridProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+type GlassyCompactRowProps = {
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  title: ReactNode;
+};
+
+type GlassyKeyValueProps = {
+  className?: string;
+  label: ReactNode;
+  value: ReactNode;
+};
+
+type GlassyTileHeadingProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+type GlassyStatusChipProps = {
+  children: ReactNode;
+  className?: string;
+  tone?: "danger" | "neutral" | "ok" | "primary" | "warn";
+};
+
+type GlassyProgressBarProps = {
+  className?: string;
+  value: number;
+};
+
+export function GlassySection({
+  children,
+  className,
+  title,
+}: GlassySectionProps) {
+  return (
+    <section className={cn("glassy-section", className)}>
+      <SectionHeader className="glassy-section__title">{title}</SectionHeader>
+      {children}
+    </section>
+  );
+}
+
+export function GlassyTile({ children, className }: GlassyTileProps) {
+  return (
+    <Surface
+      variant="glass"
+      radius="2xl"
+      shadow="tile"
+      className={cn("glassy-tile p-4", className)}
+    >
+      {children}
+    </Surface>
+  );
+}
+
+export function GlassyMetricTile({
+  className,
+  label,
+  value,
+}: GlassyMetricTileProps) {
+  return (
+    <GlassyTile
+      className={cn(
+        "glassy-metric-tile flex h-full flex-col items-center justify-center text-center",
+        className,
+      )}
+    >
+      <p className="glassy-metric-tile__label">{label}</p>
+      <p className="glassy-metric-tile__value">{value}</p>
+    </GlassyTile>
+  );
+}
+
+export function GlassyCompactMetric({
+  className,
+  label,
+  value,
+}: GlassyCompactMetricProps) {
+  return (
+    <GlassyTile className={cn("glassy-compact-metric", className)}>
+      <p className="glassy-compact-metric__label">{label}</p>
+      <p className="glassy-compact-metric__value">{value}</p>
+    </GlassyTile>
+  );
+}
+
+export function GlassyCompactGrid({
+  children,
+  className,
+}: GlassyCompactGridProps) {
+  return <div className={cn("glassy-compact-grid", className)}>{children}</div>;
+}
+
+export function GlassyCompactRow({
+  actions,
+  children,
+  className,
+  title,
+}: GlassyCompactRowProps) {
+  return (
+    <GlassyTile className={cn("glassy-compact-row", className)}>
+      <div className="glassy-compact-row__header">
+        <GlassyTileHeading>{title}</GlassyTileHeading>
+        {actions ? (
+          <div className="glassy-compact-row__actions">{actions}</div>
+        ) : null}
+      </div>
+      <div className="glassy-compact-row__main">{children}</div>
+    </GlassyTile>
+  );
+}
+
+export function GlassyKeyValue({
+  className,
+  label,
+  value,
+}: GlassyKeyValueProps) {
+  return (
+    <span className={cn("glassy-key-value", className)}>
+      <span className="glassy-key-value__label">{label}</span>
+      <span className="glassy-key-value__value">{value}</span>
+    </span>
+  );
+}
+
+export function GlassyTileHeading({
+  children,
+  className,
+}: GlassyTileHeadingProps) {
+  return <p className={cn("glassy-tile-heading", className)}>{children}</p>;
+}
+
+export function GlassyStatusChip({
+  children,
+  className,
+  tone = "neutral",
+}: GlassyStatusChipProps) {
+  return (
+    <span
+      className={cn(
+        "glassy-status-chip",
+        `glassy-status-chip--${tone}`,
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function GlassyProgressBar({
+  className,
+  value,
+}: GlassyProgressBarProps) {
+  const normalizedValue = Math.max(0, Math.min(100, value));
+
+  return (
+    <div
+      className={cn("glassy-progress", className)}
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={normalizedValue}
+      role="progressbar"
+    >
+      <span
+        className="glassy-progress__bar"
+        style={{ width: `${normalizedValue}%` }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/MetricTile.tsx b/src/components/MetricTile.tsx
index fc0f9d6..9cf7b23 100644
--- a/src/components/MetricTile.tsx
+++ b/src/components/MetricTile.tsx
@@ -19,7 +19,7 @@ export const MetricTile: React.FC<MetricTileProps> = ({
       value={value}
       radius="2xl"
       align="center"
-      variant="panelAlt"
+      variant="glass"
       className={cn("px-4 py-5", className)}
       valueClassName="text-2xl"
     />
diff --git a/src/components/Pill.tsx b/src/components/Pill.tsx
index 70fa402..ca94993 100644
--- a/src/components/Pill.tsx
+++ b/src/components/Pill.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 import { Surface } from "@/components/Surface";
 
 type PillOwnProps = {
-  variant?: "panel" | "panelAlt";
+  variant?: "panel" | "panelAlt" | "glass";
   tone?: "muted" | "primary" | "default";
   size?: "xs" | "sm";
   className?: string;
@@ -45,15 +45,12 @@ export function Pill<C extends React.ElementType = "span">({
   return (
     <Surface
       as={as}
-      variant={variant}
+      variant={
+        variant === "panel" || variant === "panelAlt" ? "glass" : variant
+      }
       radius="full"
       shadow="control"
-      className={cn(
-        "border border-border tracking-wide",
-        sizeClass[size],
-        toneClass,
-        className,
-      )}
+      className={cn("tracking-wide", sizeClass[size], toneClass, className)}
       {...(rest as Omit<
         React.ComponentPropsWithoutRef<C>,
         SurfacePropKeys | "as"
diff --git a/src/components/PipelineList.tsx b/src/components/PipelineList.tsx
index b4bc88a..a192891 100644
--- a/src/components/PipelineList.tsx
+++ b/src/components/PipelineList.tsx
@@ -10,15 +10,19 @@ type Pipeline = {
 
 type PipelineListProps = {
   pipeline: Pipeline;
+  surface?: "panelAlt" | "glass";
 };
 
 const badgeClass =
-  "rounded-full border border-[var(--accent)] bg-panel px-2 py-0.5 text-[0.8rem] font-semibold text-[var(--accent)]";
+  "rounded-full border border-[var(--accent)] bg-[color:var(--control-glass-bg)] px-2 py-0.5 text-[0.8rem] font-semibold text-[var(--accent)] supports-[backdrop-filter]:backdrop-blur-md";
 
-export const PipelineList: React.FC<PipelineListProps> = ({ pipeline }) => {
+export const PipelineList: React.FC<PipelineListProps> = ({
+  pipeline,
+  surface = "glass",
+}) => {
   return (
     <Surface
-      variant="panelAlt"
+      variant={surface}
       borderStyle="dashed"
       radius="2xl"
       shadow="tile"
diff --git a/src/components/ProposalPageHeader.tsx b/src/components/ProposalPageHeader.tsx
index e290819..514f997 100644
--- a/src/components/ProposalPageHeader.tsx
+++ b/src/components/ProposalPageHeader.tsx
@@ -1,15 +1,19 @@
-import type { ReactNode } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 
 import {
+  buildProposalStageLinks,
   ProposalStageBar,
   type ProposalStage,
 } from "@/components/ProposalStageBar";
 import { AddressInline } from "@/components/AddressInline";
 import { StatTile } from "@/components/StatTile";
+import { apiProposalStatus } from "@/lib/apiClient";
+import type { ProposalStatusDto } from "@/types/api";
 
 type ProposalPageHeaderProps = {
   title: string;
   stage: ProposalStage;
+  proposalId?: string;
   showFormationStage?: boolean;
   chamber: string;
   proposer: string;
@@ -20,19 +24,61 @@ type ProposalPageHeaderProps = {
 export function ProposalPageHeader({
   title,
   stage,
+  proposalId,
   showFormationStage = true,
   chamber,
   proposer,
   stageLinks,
   children,
 }: ProposalPageHeaderProps) {
+  const [status, setStatus] = useState<ProposalStatusDto | null>(null);
+
+  useEffect(() => {
+    if (!proposalId) {
+      setStatus(null);
+      return;
+    }
+
+    let active = true;
+    void apiProposalStatus(proposalId)
+      .then((nextStatus) => {
+        if (active) setStatus(nextStatus);
+      })
+      .catch(() => {
+        if (active) setStatus(null);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [proposalId]);
+
+  const liveStage = status?.canonicalStage ?? stage;
+  const computedStageLinks = useMemo(() => {
+    if (!proposalId) return stageLinks;
+    return buildProposalStageLinks({
+      canonicalRoute: status?.canonicalRoute,
+      liveStage,
+      proposalId,
+      routeOverrides: stageLinks,
+      showFormationStage,
+    });
+  }, [
+    liveStage,
+    proposalId,
+    showFormationStage,
+    stageLinks,
+    status?.canonicalRoute,
+  ]);
+
   return (
     <section className="space-y-4">
       <h1 className="text-center text-2xl font-semibold text-text">{title}</h1>
       <ProposalStageBar
         current={stage}
+        liveStage={liveStage}
         showFormationStage={showFormationStage}
-        stageLinks={stageLinks}
+        stageLinks={computedStageLinks}
       />
       <div className="grid gap-3 sm:grid-cols-2">
         <StatTile
diff --git a/src/components/ProposalSections.tsx b/src/components/ProposalSections.tsx
index 1fc10f6..b2c8ec3 100644
--- a/src/components/ProposalSections.tsx
+++ b/src/components/ProposalSections.tsx
@@ -5,6 +5,7 @@ import {
   type AttachmentItem,
 } from "@/components/AttachmentList";
 import { AddressInline } from "@/components/AddressInline";
+import { SectionHeader } from "@/components/SectionHeader";
 import { StatTile } from "@/components/StatTile";
 import { Surface } from "@/components/Surface";
 import { TitledSurface } from "@/components/TitledSurface";
@@ -101,9 +102,7 @@ export function ProposalSummaryCard({
 
   return (
     <section className="space-y-3 text-sm text-muted">
-      {showSummaryHeader ? (
-        <h2 className="text-lg font-semibold text-text">Summary</h2>
-      ) : null}
+      {showSummaryHeader ? <SectionHeader>Summary</SectionHeader> : null}
       {showSummary && <p>{summary}</p>}
       {stats.length > 0 && (
         <div className="grid gap-2 text-sm text-text sm:grid-cols-2 lg:grid-cols-4">
@@ -154,7 +153,7 @@ export function ProposalTeamMilestonesCard({
 }: ProposalTeamMilestonesCardProps) {
   return (
     <section className="space-y-4 text-sm text-muted">
-      <h2 className="text-lg font-semibold text-text">Team & milestones</h2>
+      <SectionHeader>Team & milestones</SectionHeader>
       <div className="grid gap-3 lg:grid-cols-2">
         <TitledSurface title="Team (locked)">
           <ul className="space-y-2 text-sm text-muted">
@@ -280,7 +279,7 @@ export function ProposalTimelineCard({
 }: ProposalTimelineCardProps) {
   return (
     <section className="space-y-3 text-sm text-text">
-      <h2 className="text-lg font-semibold text-text">Timeline</h2>
+      <SectionHeader>Timeline</SectionHeader>
       <ul className="space-y-2 text-sm text-muted">
         {items.map((item) => (
           <Surface
diff --git a/src/components/ProposalStageBar.tsx b/src/components/ProposalStageBar.tsx
index 39f769f..ffc5730 100644
--- a/src/components/ProposalStageBar.tsx
+++ b/src/components/ProposalStageBar.tsx
@@ -14,13 +14,88 @@ export type ProposalStage =
 
 type ProposalStageBarProps = {
   current: ProposalStage;
+  liveStage?: ProposalStage;
   showFormationStage?: boolean;
   className?: string;
   stageLinks?: Partial<Record<ProposalStage, string>>;
 };
 
+const stageOrder: ProposalStage[] = [
+  "draft",
+  "pool",
+  "vote",
+  "citizen_veto",
+  "chamber_veto",
+  "build",
+  "passed",
+  "failed",
+];
+
+function stageProgressIndex(stage: ProposalStage): number {
+  if (stage === "passed" || stage === "failed") return 6;
+  return stageOrder.indexOf(stage);
+}
+
+function stageRoute(proposalId: string, stage: ProposalStage): string | null {
+  if (stage === "draft") return null;
+  if (stage === "pool") return `/app/proposals/${proposalId}/pp`;
+  if (stage === "vote") return `/app/proposals/${proposalId}/chamber`;
+  if (stage === "citizen_veto")
+    return `/app/proposals/${proposalId}/citizen-veto`;
+  if (stage === "chamber_veto")
+    return `/app/proposals/${proposalId}/chamber-veto`;
+  if (stage === "build") return `/app/proposals/${proposalId}/formation`;
+  return `/app/proposals/${proposalId}/finished`;
+}
+
+function withSnapshotStage(href: string, stage: ProposalStage): string {
+  const separator = href.includes("?") ? "&" : "?";
+  return `${href}${separator}snapshotStage=${stage}`;
+}
+
+type BuildProposalStageLinksInput = {
+  canonicalRoute?: string;
+  liveStage: ProposalStage;
+  proposalId: string;
+  routeOverrides?: Partial<Record<ProposalStage, string>>;
+  showFormationStage?: boolean;
+};
+
+export function buildProposalStageLinks({
+  canonicalRoute,
+  liveStage,
+  proposalId,
+  routeOverrides,
+  showFormationStage = true,
+}: BuildProposalStageLinksInput): Partial<Record<ProposalStage, string>> {
+  const liveIndex = stageProgressIndex(liveStage);
+  const links: Partial<Record<ProposalStage, string>> = {};
+
+  for (const stage of stageOrder) {
+    if (stage === "draft") continue;
+    if (stage === "build" && !showFormationStage && liveStage !== "build") {
+      continue;
+    }
+    if (stageProgressIndex(stage) > liveIndex) continue;
+    if ((stage === "passed" || stage === "failed") && stage !== liveStage) {
+      continue;
+    }
+
+    const baseHref = routeOverrides?.[stage] ?? stageRoute(proposalId, stage);
+    if (!baseHref) continue;
+
+    links[stage] =
+      stage === liveStage
+        ? (canonicalRoute ?? baseHref)
+        : withSnapshotStage(baseHref, stage);
+  }
+
+  return links;
+}
+
 export const ProposalStageBar: React.FC<ProposalStageBarProps> = ({
   current,
+  liveStage,
   showFormationStage = true,
   className,
   stageLinks,
@@ -62,10 +137,11 @@ export const ProposalStageBar: React.FC<ProposalStageBarProps> = ({
     >
       {stages.map((stage) => {
         const active = stage.key === current;
+        const live = stage.key === liveStage;
         const href = stageLinks?.[stage.key];
         const activeClasses =
           stage.key === "draft"
-            ? "bg-panel text-text border border-border shadow-[var(--shadow-control)] ring-1 ring-inset ring-[color:var(--glass-border)]"
+            ? "border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] text-text shadow-[var(--shadow-control)] ring-1 ring-inset ring-[color:var(--surface-glass-ring)]"
             : stage.key === "pool"
               ? "bg-primary text-[var(--primary-foreground)]"
               : stage.key === "vote"
@@ -83,17 +159,34 @@ export const ProposalStageBar: React.FC<ProposalStageBarProps> = ({
           "min-w-0 basis-[calc(50%-0.25rem)] rounded-full px-3 py-2 text-center text-xs leading-tight font-semibold transition sm:flex-1 sm:basis-0",
           active
             ? activeClasses
-            : "border border-border bg-panel-alt [background-image:var(--card-grad)] bg-cover bg-no-repeat text-muted",
-          href ? "hover:border-border-strong hover:text-text" : "",
+            : "border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] text-muted supports-[backdrop-filter]:backdrop-blur-md",
+          live && !active ? "ring-2 ring-[color:var(--primary)]/35" : "",
+          href
+            ? "hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] hover:text-text"
+            : "",
         ].join(" ");
         const content = stage.render ?? stage.label;
+        const inner = (
+          <span className="flex min-w-0 flex-col items-center gap-0.5">
+            <span className="min-w-0 truncate">{content}</span>
+            {live ? (
+              <span className="rounded-full bg-[color:var(--primary-dim)] px-1.5 py-0.5 text-[0.6rem] leading-none text-text">
+                Live
+              </span>
+            ) : active ? (
+              <span className="rounded-full bg-[color:var(--surface-glass-bg)] px-1.5 py-0.5 text-[0.6rem] leading-none text-text">
+                Viewing
+              </span>
+            ) : null}
+          </span>
+        );
         return href ? (
           <Link key={stage.key} to={href} className={className}>
-            {content}
+            {inner}
           </Link>
         ) : (
           <div key={stage.key} className={className}>
-            {content}
+            {inner}
           </div>
         );
       })}
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index fa39c0d..1282363 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -102,10 +102,7 @@ export function SearchBar<
           aria-label={ariaLabel || placeholder}
           onFocus={() => setFiltersOpen(true)}
           onClick={() => setFiltersOpen(true)}
-          className={cn(
-            "w-full border border-border bg-panel-alt text-text",
-            inputClassName,
-          )}
+          className={cn("w-full text-text", inputClassName)}
         />
         {filtersOpen ? (
           <Surface
@@ -118,7 +115,7 @@ export function SearchBar<
             <div className="mt-4 flex justify-end gap-2">
               <Button
                 size="sm"
-                className="border border-accent bg-panel text-accent hover:bg-accent hover:text-accent-foreground"
+                variant="outline"
                 onClick={() => setFiltersOpen(false)}
               >
                 Close
diff --git a/src/components/StageChip.css b/src/components/StageChip.css
new file mode 100644
index 0000000..f42cdd4
--- /dev/null
+++ b/src/components/StageChip.css
@@ -0,0 +1,269 @@
+.stage-chip {
+  border: 1px solid var(--stage-chip-border);
+  background: var(--stage-chip-bg);
+  color: var(--stage-chip-text);
+}
+
+.stage-chip--proposal-pool {
+  --stage-chip-bg: #fff1dc;
+  --stage-chip-border: rgba(176, 102, 25, 0.2);
+  --stage-chip-text: #9a5519;
+}
+
+.stage-chip--chamber-vote {
+  --stage-chip-bg: #e6f0ff;
+  --stage-chip-border: rgba(79, 106, 215, 0.2);
+  --stage-chip-text: #405fc4;
+}
+
+.stage-chip--citizen-veto {
+  --stage-chip-bg: #fff0f3;
+  --stage-chip-border: rgba(209, 61, 93, 0.2);
+  --stage-chip-text: #b82d4e;
+}
+
+.stage-chip--chamber-veto {
+  --stage-chip-bg: #ffe7ec;
+  --stage-chip-border: rgba(209, 61, 93, 0.32);
+  --stage-chip-text: #a91f42;
+}
+
+.stage-chip--formation {
+  --stage-chip-bg: #f2eaff;
+  --stage-chip-border: rgba(130, 89, 210, 0.24);
+  --stage-chip-text: #6f47bf;
+}
+
+.stage-chip--passed {
+  --stage-chip-bg: #e7f8ef;
+  --stage-chip-border: rgba(35, 132, 83, 0.2);
+  --stage-chip-text: #197246;
+}
+
+.stage-chip--failed {
+  --stage-chip-bg: #fce8e8;
+  --stage-chip-border: rgba(199, 53, 53, 0.22);
+  --stage-chip-text: #af3030;
+}
+
+.stage-chip--thread {
+  --stage-chip-bg: #edf2f7;
+  --stage-chip-border: rgba(71, 85, 105, 0.18);
+  --stage-chip-text: #475569;
+}
+
+.stage-chip--courts {
+  --stage-chip-bg: #fff4cf;
+  --stage-chip-border: rgba(151, 113, 14, 0.22);
+  --stage-chip-text: #85610b;
+}
+
+.stage-chip--faction {
+  --stage-chip-bg: #ffeaf6;
+  --stage-chip-border: rgba(173, 69, 137, 0.22);
+  --stage-chip-text: #9c3c7b;
+}
+
+.stage-chip--system {
+  --stage-chip-bg: #eef2f6;
+  --stage-chip-border: rgba(75, 85, 99, 0.22);
+  --stage-chip-text: #4b5563;
+}
+
+:root[data-theme="light"] .stage-chip--proposal-pool {
+  --stage-chip-bg: #fff5e8;
+  --stage-chip-border: rgba(176, 102, 25, 0.22);
+  --stage-chip-text: #8f4f17;
+}
+
+:root[data-theme="light"] .stage-chip--chamber-vote {
+  --stage-chip-bg: #eaf2ff;
+  --stage-chip-border: rgba(79, 106, 215, 0.24);
+  --stage-chip-text: #3756bd;
+}
+
+:root[data-theme="light"] .stage-chip--citizen-veto {
+  --stage-chip-bg: #fff0f3;
+  --stage-chip-border: rgba(209, 61, 93, 0.24);
+  --stage-chip-text: #aa2948;
+}
+
+:root[data-theme="light"] .stage-chip--chamber-veto {
+  --stage-chip-bg: #ffe6ec;
+  --stage-chip-border: rgba(209, 61, 93, 0.34);
+  --stage-chip-text: #9e1d3d;
+}
+
+:root[data-theme="light"] .stage-chip--formation {
+  --stage-chip-bg: #f4ebff;
+  --stage-chip-border: rgba(130, 89, 210, 0.26);
+  --stage-chip-text: #6843b4;
+}
+
+:root[data-theme="light"] .stage-chip--passed {
+  --stage-chip-bg: #e8f8f0;
+  --stage-chip-border: rgba(35, 132, 83, 0.22);
+  --stage-chip-text: #176c42;
+}
+
+:root[data-theme="light"] .stage-chip--failed {
+  --stage-chip-bg: #fce8e8;
+  --stage-chip-border: rgba(199, 53, 53, 0.24);
+  --stage-chip-text: #a92e2e;
+}
+
+:root[data-theme="light"] .stage-chip--thread {
+  --stage-chip-bg: #f1f4f8;
+  --stage-chip-border: rgba(71, 85, 105, 0.2);
+  --stage-chip-text: #42526a;
+}
+
+:root[data-theme="light"] .stage-chip--courts {
+  --stage-chip-bg: #fff5d6;
+  --stage-chip-border: rgba(151, 113, 14, 0.24);
+  --stage-chip-text: #7c5a0a;
+}
+
+:root[data-theme="light"] .stage-chip--faction {
+  --stage-chip-bg: #ffedf7;
+  --stage-chip-border: rgba(173, 69, 137, 0.24);
+  --stage-chip-text: #933873;
+}
+
+:root[data-theme="light"] .stage-chip--system {
+  --stage-chip-bg: #f1f4f7;
+  --stage-chip-border: rgba(75, 85, 99, 0.24);
+  --stage-chip-text: #47515f;
+}
+
+:root[data-theme="night"] .stage-chip--proposal-pool {
+  --stage-chip-bg: rgba(244, 179, 127, 0.18);
+  --stage-chip-border: rgba(244, 179, 127, 0.34);
+  --stage-chip-text: #ffd3a7;
+}
+
+:root[data-theme="night"] .stage-chip--chamber-vote {
+  --stage-chip-bg: rgba(111, 168, 255, 0.18);
+  --stage-chip-border: rgba(111, 168, 255, 0.36);
+  --stage-chip-text: #a8ccff;
+}
+
+:root[data-theme="night"] .stage-chip--citizen-veto {
+  --stage-chip-bg: rgba(255, 99, 132, 0.16);
+  --stage-chip-border: rgba(255, 99, 132, 0.34);
+  --stage-chip-text: #ffb1c3;
+}
+
+:root[data-theme="night"] .stage-chip--chamber-veto {
+  --stage-chip-bg: rgba(255, 99, 132, 0.22);
+  --stage-chip-border: rgba(255, 99, 132, 0.46);
+  --stage-chip-text: #ffc3d0;
+}
+
+:root[data-theme="night"] .stage-chip--formation {
+  --stage-chip-bg: rgba(176, 132, 255, 0.18);
+  --stage-chip-border: rgba(176, 132, 255, 0.36);
+  --stage-chip-text: #d9c2ff;
+}
+
+:root[data-theme="night"] .stage-chip--passed {
+  --stage-chip-bg: rgba(74, 222, 128, 0.14);
+  --stage-chip-border: rgba(74, 222, 128, 0.32);
+  --stage-chip-text: #a7f3c6;
+}
+
+:root[data-theme="night"] .stage-chip--failed {
+  --stage-chip-bg: rgba(248, 113, 113, 0.16);
+  --stage-chip-border: rgba(248, 113, 113, 0.34);
+  --stage-chip-text: #fecaca;
+}
+
+:root[data-theme="night"] .stage-chip--thread {
+  --stage-chip-bg: rgba(148, 163, 184, 0.18);
+  --stage-chip-border: rgba(148, 163, 184, 0.34);
+  --stage-chip-text: #d7e0ea;
+}
+
+:root[data-theme="night"] .stage-chip--courts {
+  --stage-chip-bg: rgba(250, 204, 21, 0.15);
+  --stage-chip-border: rgba(250, 204, 21, 0.34);
+  --stage-chip-text: #fde68a;
+}
+
+:root[data-theme="night"] .stage-chip--faction {
+  --stage-chip-bg: rgba(244, 114, 182, 0.16);
+  --stage-chip-border: rgba(244, 114, 182, 0.36);
+  --stage-chip-text: #fbcfe8;
+}
+
+:root[data-theme="night"] .stage-chip--system {
+  --stage-chip-bg: rgba(203, 213, 225, 0.14);
+  --stage-chip-border: rgba(203, 213, 225, 0.3);
+  --stage-chip-text: #dbe5f0;
+}
+
+:root[data-theme="fire"] .stage-chip--proposal-pool {
+  --stage-chip-bg: rgba(255, 209, 102, 0.18);
+  --stage-chip-border: rgba(255, 209, 102, 0.38);
+  --stage-chip-text: #ffe0a3;
+}
+
+:root[data-theme="fire"] .stage-chip--chamber-vote {
+  --stage-chip-bg: rgba(255, 138, 31, 0.2);
+  --stage-chip-border: rgba(255, 138, 31, 0.42);
+  --stage-chip-text: #ffc17a;
+}
+
+:root[data-theme="fire"] .stage-chip--citizen-veto {
+  --stage-chip-bg: rgba(255, 45, 26, 0.17);
+  --stage-chip-border: rgba(255, 45, 26, 0.38);
+  --stage-chip-text: #ffaaa0;
+}
+
+:root[data-theme="fire"] .stage-chip--chamber-veto {
+  --stage-chip-bg: rgba(255, 45, 26, 0.24);
+  --stage-chip-border: rgba(255, 45, 26, 0.52);
+  --stage-chip-text: #ffc1b8;
+}
+
+:root[data-theme="fire"] .stage-chip--formation {
+  --stage-chip-bg: rgba(255, 94, 0, 0.2);
+  --stage-chip-border: rgba(255, 94, 0, 0.44);
+  --stage-chip-text: #ffbd8a;
+}
+
+:root[data-theme="fire"] .stage-chip--passed {
+  --stage-chip-bg: rgba(255, 207, 87, 0.16);
+  --stage-chip-border: rgba(255, 207, 87, 0.36);
+  --stage-chip-text: #ffe799;
+}
+
+:root[data-theme="fire"] .stage-chip--failed {
+  --stage-chip-bg: rgba(255, 61, 0, 0.2);
+  --stage-chip-border: rgba(255, 61, 0, 0.42);
+  --stage-chip-text: #ffb49c;
+}
+
+:root[data-theme="fire"] .stage-chip--thread {
+  --stage-chip-bg: rgba(216, 170, 130, 0.16);
+  --stage-chip-border: rgba(216, 170, 130, 0.34);
+  --stage-chip-text: #f0d2b8;
+}
+
+:root[data-theme="fire"] .stage-chip--courts {
+  --stage-chip-bg: rgba(255, 199, 87, 0.16);
+  --stage-chip-border: rgba(255, 199, 87, 0.36);
+  --stage-chip-text: #ffe6a1;
+}
+
+:root[data-theme="fire"] .stage-chip--faction {
+  --stage-chip-bg: rgba(255, 113, 67, 0.18);
+  --stage-chip-border: rgba(255, 113, 67, 0.38);
+  --stage-chip-text: #ffc1ad;
+}
+
+:root[data-theme="fire"] .stage-chip--system {
+  --stage-chip-bg: rgba(255, 226, 194, 0.13);
+  --stage-chip-border: rgba(255, 226, 194, 0.3);
+  --stage-chip-text: #f8d7b6;
+}
diff --git a/src/components/StageChip.tsx b/src/components/StageChip.tsx
index fdcd0ab..250fb3d 100644
--- a/src/components/StageChip.tsx
+++ b/src/components/StageChip.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
+import { Chip } from "@/components/Chip";
 import { HintLabel } from "@/components/Hint";
 import {
   stageChipKindForStage,
@@ -8,20 +9,20 @@ import {
   type Stage,
   type StageChipKind,
 } from "@/types/stages";
+import "./StageChip.css";
 
 const chipClasses: Record<StageChipKind, string> = {
-  proposal_pool: "bg-[color:var(--accent-warm)]/15 text-[var(--accent-warm)]",
-  chamber_vote: "bg-[color:var(--accent)]/15 text-[var(--accent)]",
-  citizen_veto: "bg-[color:var(--danger)]/12 text-[color:var(--danger)]",
-  chamber_veto:
-    "bg-[color:var(--danger)]/16 text-[color:var(--danger)] ring-1 ring-[color:var(--danger)]/20",
-  formation: "bg-[color:var(--primary)]/12 text-primary",
-  passed: "bg-[color:var(--ok)]/20 text-[color:var(--ok)]",
-  failed: "bg-[color:var(--danger)]/12 text-[color:var(--danger)]",
-  thread: "bg-panel-alt text-muted",
-  courts: "bg-[color:var(--accent-warm)]/15 text-[var(--accent-warm)]",
-  faction: "bg-panel-alt text-muted",
-  system: "bg-[color:var(--danger)]/12 text-[color:var(--danger)]",
+  proposal_pool: "stage-chip--proposal-pool",
+  chamber_vote: "stage-chip--chamber-vote",
+  citizen_veto: "stage-chip--citizen-veto",
+  chamber_veto: "stage-chip--chamber-veto",
+  formation: "stage-chip--formation",
+  passed: "stage-chip--passed",
+  failed: "stage-chip--failed",
+  thread: "stage-chip--thread",
+  courts: "stage-chip--courts",
+  faction: "stage-chip--faction",
+  system: "stage-chip--system",
 };
 
 const hintByKind: Partial<Record<StageChipKind, string>> = {
@@ -42,14 +43,8 @@ export function StageChip({ stage, label, className }: StageChipProps) {
   const content = label ?? stageLabelForStage(stage);
 
   return (
-    <span
-      className={cn(
-        "inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold tracking-wide",
-        chipClasses[kind],
-        className,
-      )}
-    >
+    <Chip className={cn("stage-chip", chipClasses[kind], className)}>
       {termId ? <HintLabel termId={termId}>{content}</HintLabel> : content}
-    </span>
+    </Chip>
   );
 }
diff --git a/src/components/StageDataTile.tsx b/src/components/StageDataTile.tsx
index 6000fd0..faaf8b7 100644
--- a/src/components/StageDataTile.tsx
+++ b/src/components/StageDataTile.tsx
@@ -20,7 +20,7 @@ export function StageDataTile({
 }: StageDataTileProps) {
   return (
     <Surface
-      variant="panelAlt"
+      variant="glass"
       radius="xl"
       shadow="tile"
       className={cn("p-4", className)}
diff --git a/src/components/StatGrid.tsx b/src/components/StatGrid.tsx
index a1596cf..28409a0 100644
--- a/src/components/StatGrid.tsx
+++ b/src/components/StatGrid.tsx
@@ -11,15 +11,19 @@ type StatItem = {
 
 type StatGridProps = {
   items: StatItem[];
+  surface?: "panelAlt" | "glass";
 };
 
-export const StatGrid: React.FC<StatGridProps> = ({ items }) => {
+export const StatGrid: React.FC<StatGridProps> = ({
+  items,
+  surface = "panelAlt",
+}) => {
   return (
     <dl className="grid grid-cols-2 gap-3 text-center text-sm text-text">
       {items.map((item) => (
         <Surface
           key={typeof item.label === "string" ? item.label : `${item.value}`}
-          variant="panelAlt"
+          variant={surface}
           radius="xl"
           shadow="tile"
           className="flex flex-col items-center px-3 py-2 text-center"
@@ -55,7 +59,7 @@ export const makeChamberStats = (stats: {
   lcm: string;
 }): StatItem[] => [
   {
-    label: <HintLabel termId="acm">ACM</HintLabel>,
+    label: <HintLabel termId="acm" prefix="Members'" termText="ACM" />,
     value: stats.acm,
     tone: "primary",
   },
diff --git a/src/components/StatTile.tsx b/src/components/StatTile.tsx
index 07e7646..6586bfd 100644
--- a/src/components/StatTile.tsx
+++ b/src/components/StatTile.tsx
@@ -11,7 +11,7 @@ type StatTileProps = {
   valueClassName?: string;
   align?: "center" | "left";
   radius?: "xl" | "2xl";
-  variant?: "panel" | "panelAlt";
+  variant?: "panel" | "panelAlt" | "glass";
 };
 
 /**
@@ -26,7 +26,7 @@ export const StatTile: React.FC<StatTileProps> = ({
   valueClassName,
   align = "center",
   radius = "xl",
-  variant = "panelAlt",
+  variant = "glass",
 }) => {
   const alignClasses = align === "left" ? "text-left" : "text-center";
   return (
diff --git a/src/components/StatusPill.tsx b/src/components/StatusPill.tsx
index afba03e..6f0d4e3 100644
--- a/src/components/StatusPill.tsx
+++ b/src/components/StatusPill.tsx
@@ -20,7 +20,7 @@ export const StatusPill: React.FC<StatusPillProps> = ({
 }) => {
   return (
     <Surface
-      variant="panelAlt"
+      variant="glass"
       radius="full"
       shadow="control"
       className={cn(
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
index 2dfa645..231ad8d 100644
--- a/src/components/Surface.tsx
+++ b/src/components/Surface.tsx
@@ -6,15 +6,20 @@ type PolymorphicRef<C extends React.ElementType> =
   React.ComponentPropsWithRef<C>["ref"];
 
 const surfaceVariants = cva(
-  "border border-border [background-image:var(--card-grad)] bg-cover bg-no-repeat ring-1 ring-inset ring-[color:var(--glass-border)]",
+  "border bg-cover bg-no-repeat ring-1 ring-inset transition-colors duration-150",
   {
     variants: {
       variant: {
-        panel: "bg-panel",
-        panelAlt: "bg-panel-alt",
+        panel:
+          "border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] ring-[color:var(--surface-glass-ring)] hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--surface-glass-hover-bg)] supports-[backdrop-filter]:backdrop-blur-md supports-[backdrop-filter]:backdrop-saturate-150",
+        panelAlt:
+          "border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] ring-[color:var(--surface-glass-ring)] hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--surface-glass-hover-bg)] supports-[backdrop-filter]:backdrop-blur-md supports-[backdrop-filter]:backdrop-saturate-150",
+        glass:
+          "border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] ring-[color:var(--surface-glass-ring)] hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--surface-glass-hover-bg)] supports-[backdrop-filter]:backdrop-blur-md supports-[backdrop-filter]:backdrop-saturate-150",
         transparent: "bg-transparent",
       },
       radius: {
+        md: "rounded-lg",
         xl: "rounded-xl",
         "2xl": "rounded-2xl",
         full: "rounded-full",
diff --git a/src/components/TitledSurface.tsx b/src/components/TitledSurface.tsx
index a6c3002..99677c8 100644
--- a/src/components/TitledSurface.tsx
+++ b/src/components/TitledSurface.tsx
@@ -15,7 +15,7 @@ export function TitledSurface({
   children,
   className,
   titleClassName,
-  variant = "panelAlt",
+  variant = "glass",
   ...props
 }: TitledSurfaceProps) {
   return (
diff --git a/src/components/VoteButton.tsx b/src/components/VoteButton.tsx
index b63f7a3..cf71b09 100644
--- a/src/components/VoteButton.tsx
+++ b/src/components/VoteButton.tsx
@@ -16,7 +16,7 @@ type VoteButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
 };
 
 const baseClasses =
-  "rounded-full border-2 font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-60";
+  "rounded-full border font-semibold shadow-[var(--shadow-control)] transition-colors supports-[backdrop-filter]:backdrop-blur-md disabled:cursor-not-allowed disabled:opacity-60";
 
 const sizeClasses: Record<VoteButtonSize, string> = {
   sm: "min-w-[140px] px-6 py-2 text-sm",
@@ -25,10 +25,11 @@ const sizeClasses: Record<VoteButtonSize, string> = {
 
 const toneClasses: Record<VoteButtonTone, string> = {
   accent:
-    "border-[var(--accent)] text-[var(--accent)] hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
+    "border-[var(--accent)] bg-[color:var(--control-glass-bg)] text-[var(--accent)] hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
   destructive:
-    "border-[var(--destructive)] text-[var(--destructive)] hover:bg-[var(--destructive)] hover:text-[var(--destructive-foreground)]",
-  neutral: "border-border text-muted hover:bg-panel hover:text-text",
+    "border-[var(--destructive)] bg-[color:var(--control-glass-bg)] text-[var(--destructive)] hover:bg-[var(--destructive)] hover:text-[var(--destructive-foreground)]",
+  neutral:
+    "border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] text-muted hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] hover:text-text",
 };
 
 export function VoteButton({
diff --git a/src/components/discussions/ThreadPrimitives.tsx b/src/components/discussions/ThreadPrimitives.tsx
index ab87dd7..6428625 100644
--- a/src/components/discussions/ThreadPrimitives.tsx
+++ b/src/components/discussions/ThreadPrimitives.tsx
@@ -50,7 +50,7 @@ type DiscussionThreadMessage = {
 };
 
 const textareaClassName =
-  "min-h-[96px] w-full resize-y rounded-xl border border-border bg-panel-alt px-3 py-2 text-sm text-text shadow-[var(--shadow-control)] focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60";
+  "min-h-[96px] w-full resize-y rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] px-3 py-2 text-sm text-text shadow-[var(--shadow-control)] transition supports-[backdrop-filter]:backdrop-blur-md hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60";
 
 type ThreadCategoryFilterProps<TValue extends string> = {
   options: Array<DiscussionOption<TValue>>;
diff --git a/src/components/primitives/badge.tsx b/src/components/primitives/badge.tsx
index 8b02c50..cf2dcf9 100644
--- a/src/components/primitives/badge.tsx
+++ b/src/components/primitives/badge.tsx
@@ -18,9 +18,11 @@ export function Badge({
   };
   const variants = {
     default:
-      "bg-[var(--primary-dim)] text-[var(--primary)] border border-[var(--primary-dim)]",
-    outline: "border border-border bg-transparent text-text",
-    muted: "border border-border bg-panel-alt text-muted",
+      "border border-[color:var(--surface-glass-hover-border)] bg-[color:var(--primary-dim)] text-[var(--primary)]",
+    outline:
+      "border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] text-text supports-[backdrop-filter]:backdrop-blur-md",
+    muted:
+      "border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] text-muted supports-[backdrop-filter]:backdrop-blur-md",
   };
 
   return (
diff --git a/src/components/primitives/button.tsx b/src/components/primitives/button.tsx
index 2b7e029..aa37e65 100644
--- a/src/components/primitives/button.tsx
+++ b/src/components/primitives/button.tsx
@@ -16,6 +16,7 @@ const buttonVariants = cva(
           "bg-[var(--panel)] text-[var(--primary)] border border-[var(--primary)] shadow-[var(--shadow-control)] hover:bg-[var(--primary)] hover:text-[var(--primary-foreground)] focus-visible:ring-[var(--primary)] focus-visible:ring-offset-[var(--panel)]",
       },
       size: {
+        compact: "h-8 min-w-16 px-3 text-xs",
         sm: "h-9 px-3 text-sm",
         md: "h-10 px-4 text-base",
         lg: "h-11 px-5 text-lg",
diff --git a/src/components/primitives/card.tsx b/src/components/primitives/card.tsx
index 509d81e..f4be47b 100644
--- a/src/components/primitives/card.tsx
+++ b/src/components/primitives/card.tsx
@@ -1,15 +1,16 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
+import { Surface } from "@/components/Surface";
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 export function Card({ className, ...props }: CardProps) {
   return (
-    <div
-      className={cn(
-        "rounded-2xl border border-border bg-panel [background-image:var(--card-grad)] bg-cover bg-no-repeat shadow-(--shadow-card) ring-1 ring-(--glass-border) ring-inset",
-        className,
-      )}
+    <Surface
+      variant="glass"
+      radius="2xl"
+      shadow="card"
+      className={cn("overflow-hidden", className)}
       {...props}
     />
   );
@@ -28,7 +29,15 @@ export function CardTitle({
   className,
   ...props
 }: React.HTMLAttributes<HTMLHeadingElement>) {
-  return <h3 className={cn("text-lg font-semibold", className)} {...props} />;
+  return (
+    <h3
+      className={cn(
+        "text-base leading-tight font-semibold text-text",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export function CardDescription({
diff --git a/src/components/primitives/input.tsx b/src/components/primitives/input.tsx
index 214d7be..5a76bdb 100644
--- a/src/components/primitives/input.tsx
+++ b/src/components/primitives/input.tsx
@@ -5,9 +5,9 @@ export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const base =
-  "flex h-10 w-full rounded-xl border border-border bg-[var(--panel-alt)] px-3 py-2 text-sm text-[var(--text)] shadow-[var(--shadow-control)] transition " +
+  "flex h-10 w-full rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] px-3 py-2 text-sm text-[var(--text)] shadow-[var(--shadow-control)] transition supports-[backdrop-filter]:backdrop-blur-md " +
   "placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:ring-offset-2 focus-visible:ring-offset-panel focus-visible:shadow-[var(--shadow-tile)] " +
-  "disabled:cursor-not-allowed disabled:opacity-60";
+  "hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] disabled:cursor-not-allowed disabled:opacity-60";
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type = "text", ...props }, ref) => {
diff --git a/src/components/primitives/select.tsx b/src/components/primitives/select.tsx
index b9f06c0..6e21c8f 100644
--- a/src/components/primitives/select.tsx
+++ b/src/components/primitives/select.tsx
@@ -5,7 +5,7 @@ export interface SelectProps
   extends React.SelectHTMLAttributes<HTMLSelectElement> {}
 
 const base =
-  "h-10 w-full rounded-xl border border-border bg-panel-alt px-3 text-sm text-text shadow-[var(--shadow-control)] transition " +
+  "h-10 w-full rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] px-3 text-sm text-text shadow-[var(--shadow-control)] transition supports-[backdrop-filter]:backdrop-blur-md hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] " +
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:ring-offset-2 focus-visible:ring-offset-panel " +
   "disabled:cursor-not-allowed disabled:opacity-60";
 
diff --git a/src/components/primitives/tabs.tsx b/src/components/primitives/tabs.tsx
index 4185357..8dc15d0 100644
--- a/src/components/primitives/tabs.tsx
+++ b/src/components/primitives/tabs.tsx
@@ -21,7 +21,7 @@ export function Tabs({
   return (
     <div
       className={cn(
-        "flex max-w-full flex-wrap rounded-full border border-border bg-panel [background-image:var(--card-grad)] p-1 shadow-(--shadow-control) ring-1 ring-(--glass-border) ring-inset",
+        "flex max-w-full flex-wrap rounded-full border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] p-1 shadow-(--shadow-control) ring-1 ring-[color:var(--surface-glass-ring)] ring-inset supports-[backdrop-filter]:backdrop-blur-md",
         className,
       )}
       {...props}
@@ -42,7 +42,7 @@ export function Tabs({
               "min-w-[90px] rounded-full px-3 py-1.5 text-sm font-semibold transition",
               active
                 ? "border border-(--glass-border) bg-(--btn-primary-hover-bg) text-primary-foreground shadow-(--shadow-control) supports-backdrop-filter:backdrop-blur-sm supports-backdrop-filter:backdrop-saturate-150"
-                : "bg-transparent text-text hover:bg-panel-alt",
+                : "bg-transparent text-text hover:bg-[color:var(--surface-glass-hover-bg)]",
             )}
           >
             {opt.label}
diff --git a/src/data/pageHints.ts b/src/data/pageHints.ts
index 905b05e..2395b34 100644
--- a/src/data/pageHints.ts
+++ b/src/data/pageHints.ts
@@ -40,7 +40,7 @@ export const pageHints: Record<string, PageHintEntry> = {
       {
         heading: "Filters & sort",
         items: [
-          "Filter by tier, chamber, tags, ACM/MM minimums, and formation membership.",
+          "Filter by tier, chamber, tags, ACM minimums, and formation membership.",
           "Sort by ACM, tier, or name; toggle cards vs list view.",
           "Results are scrollable (cards: 4 visible; list: 16 visible) to keep layout tidy.",
         ],
@@ -48,9 +48,9 @@ export const pageHints: Record<string, PageHintEntry> = {
       {
         heading: "Cards & list",
         items: [
-          "Cards show headline stats (ACM/MM, tier, formation, status); list view compresses the same.",
+          "Cards show headline stats (ACM, tier, formation, status); list view compresses the same.",
           "Open a profile for proof toggles, activity, formation projects, and governance stats.",
-          "Hints on ACM/LCM/MM/tier/era explain terms in place.",
+          "Hints on ACM/tier/era explain terms in place.",
         ],
       },
     ],
@@ -81,13 +81,13 @@ export const pageHints: Record<string, PageHintEntry> = {
     id: "chambers",
     title: "Chambers",
     intro:
-      "Overview of specialization chambers: multipliers (M), governors, ACM/LCM, and pipelines.",
+      "Overview of specialization chambers: multipliers (M), governors, members' ACM, LCM, and pipelines.",
     sections: [
       {
         heading: "What you see",
         items: [
-          "Top metrics for chambers, governors, ACM, and live proposals.",
-          "Per-chamber cards with multipliers, governors, LCM/ACM, and pipeline counts (pool/vote/build).",
+          "Top metrics for chambers, governors, members' ACM, and live proposals.",
+          "Per-chamber cards with multipliers, governors, LCM, members' ACM, and pipeline counts (pool/vote/build).",
         ],
       },
       {
@@ -125,20 +125,20 @@ export const pageHints: Record<string, PageHintEntry> = {
     id: "factions",
     title: "Factions",
     intro:
-      "Browse factions, membership, votes, ACM, and goals. Open faction pages for initiatives and resources.",
+      "Browse factions, membership, votes, members' ACM, and goals. Open faction pages for initiatives and resources.",
     sections: [
       {
         heading: "What you see",
         items: [
-          "Cards with members, votes, ACM, focus blurbs, and tags.",
-          "Totals across factions (members, votes, ACM) plus search-as-you-type to filter cards.",
+          "Cards with members, votes, members' ACM, focus blurbs, and tags.",
+          "Totals across factions (members, votes, members' ACM) plus search-as-you-type to filter cards.",
         ],
       },
       {
         heading: "What you can do",
         items: [
           "Open a faction to see initiatives, roster, resources, and stance.",
-          "Use consistent blue buttons and hints to learn ACM/MM terms.",
+          "Use consistent blue buttons and hints to learn ACM terms.",
         ],
       },
     ],
@@ -176,7 +176,7 @@ export const pageHints: Record<string, PageHintEntry> = {
         heading: "Progression",
         items: [
           "Current tier, progress bar toward next tier, and prerequisites (uptime, activity).",
-          "Proposal rights available per tier; ACM/MM/tier hints explain terms in context.",
+          "ACM and tier hints explain terms in context.",
         ],
       },
     ],
@@ -190,9 +190,9 @@ export const pageHints: Record<string, PageHintEntry> = {
       {
         heading: "What you see",
         items: [
-          "Header with avatar, tier, ACM/MM, faction, and delegation share.",
+          "Header with avatar, tier, ACM, faction, and delegation share.",
           "Proof toggles (PoT/PoD/PoG), governance activity tiles, and project involvement.",
-          "Scrollable activity and formation lists; hints on ACM/LCM/MM/tier/era clarify terminology.",
+          "Scrollable activity and formation lists; hints on ACM/tier/era clarify terminology.",
         ],
       },
     ],
@@ -201,14 +201,14 @@ export const pageHints: Record<string, PageHintEntry> = {
     id: "faction",
     title: "Faction detail",
     intro:
-      "Detailed faction view: stance, members, votes/ACM, initiatives, roster, and resources.",
+      "Detailed faction view: stance, members, votes, members' ACM, initiatives, roster, and resources.",
     sections: [
       {
         heading: "What you see",
         items: [
-          "Hero header with faction name; stats tiles (members, votes, ACM, creator).",
+          "Hero header with faction name; stats tiles (members, votes, members' ACM, creator).",
           "Active initiatives with location/stage labels; resources/links for the faction.",
-          "Roster with roles and ACM/MM tags; open slots/threads vary by design.",
+          "Roster with roles and ACM tags; open slots/threads vary by design.",
         ],
       },
     ],
diff --git a/src/lib/dtoParsers.ts b/src/lib/dtoParsers.ts
index 21101fd..8e2a362 100644
--- a/src/lib/dtoParsers.ts
+++ b/src/lib/dtoParsers.ts
@@ -41,8 +41,8 @@ export function computeChamberMetrics(chambers: ChamberDto[]) {
   // is an absolute total for that chamber's governor set (not a chamber-local slice).
   // Summing across chambers would double-count governors who are members of more than one chamber.
   //
-  // The General chamber includes the full governor set, so the largest ACM total is a stable
-  // approximation for "Total ACM" across unique governors.
+  // The General chamber includes the full governor set, so the largest members'
+  // ACM total is a stable approximation across unique governors.
   const totalAcm = chambers.reduce((max, chamber) => {
     const { acm } = getChamberNumericStats(chamber);
     return Math.max(max, acm);
diff --git a/src/lib/factionUi.ts b/src/lib/factionUi.ts
index b617971..89faa96 100644
--- a/src/lib/factionUi.ts
+++ b/src/lib/factionUi.ts
@@ -1,8 +1,18 @@
 import { addressesReferToSameIdentity } from "@/lib/addressIdentity";
+import { proposalSummaryPreview } from "@/lib/textPreview";
 import type { FactionDto } from "@/types/api";
 
 export type FactionMembership = NonNullable<FactionDto["memberships"]>[number];
 
+export const FACTION_SUMMARY_PREVIEW_MAX = 280;
+
+export function factionSummaryPreview(
+  value: string,
+  maxLength = FACTION_SUMMARY_PREVIEW_MAX,
+): string {
+  return proposalSummaryPreview(value, maxLength);
+}
+
 export function findViewerFactionMembership(
   memberships: FactionMembership[] | null | undefined,
   viewerAddress: string | null | undefined,
diff --git a/src/lib/formationActionsUi.ts b/src/lib/formationActionsUi.ts
new file mode 100644
index 0000000..2fc3f30
--- /dev/null
+++ b/src/lib/formationActionsUi.ts
@@ -0,0 +1,112 @@
+type FormationProjectState =
+  | "active"
+  | "awaiting_milestone_vote"
+  | "canceled"
+  | "ready_to_finish"
+  | "completed"
+  | undefined;
+
+export type FormationActionVisibilityInput = {
+  actionBusy: boolean;
+  authenticated: boolean;
+  eligible: boolean;
+  hasOpenRoles: boolean;
+  isProposerViewer: boolean;
+  nextMilestone: number | undefined;
+  pendingMilestone: number | undefined;
+  projectState: FormationProjectState;
+  viewerCanFinishProject?: boolean;
+  viewerCanJoin?: boolean;
+  viewerCanOpenMilestoneVote?: boolean;
+  viewerCanSubmitMilestone?: boolean;
+  viewerIsTeamMember: boolean;
+};
+
+export type FormationActionVisibility = {
+  canFinishProject: boolean;
+  canJoinProject: boolean;
+  canOpenMilestoneVote: boolean;
+  canSubmitMilestone: boolean;
+  showFinishProject: boolean;
+  showJoinProject: boolean;
+  showOpenMilestoneVote: boolean;
+  showSubmitMilestone: boolean;
+  statusMessage: string | null;
+};
+
+function canUseAuthenticatedCommand(input: FormationActionVisibilityInput) {
+  return input.authenticated && input.eligible && !input.actionBusy;
+}
+
+export function getFormationActionVisibility(
+  input: FormationActionVisibilityInput,
+): FormationActionVisibility {
+  const nextMilestoneReady =
+    typeof input.nextMilestone === "number" && input.nextMilestone > 0;
+  const pendingMilestoneReady =
+    typeof input.pendingMilestone === "number" && input.pendingMilestone > 0;
+  const projectIsActive = input.projectState === "active";
+  const projectIsReadyToFinish = input.projectState === "ready_to_finish";
+  const projectIsAwaitingVote =
+    input.projectState === "awaiting_milestone_vote";
+  const viewerCanJoin = input.viewerCanJoin ?? true;
+  const viewerCanOpenMilestoneVote = input.viewerCanOpenMilestoneVote ?? true;
+  const viewerCanSubmitMilestone = input.viewerCanSubmitMilestone ?? true;
+  const viewerCanFinishProject = input.viewerCanFinishProject ?? true;
+
+  const showJoinProject =
+    projectIsActive &&
+    input.hasOpenRoles &&
+    !input.isProposerViewer &&
+    !input.viewerIsTeamMember;
+  const showSubmitMilestone =
+    projectIsActive && input.isProposerViewer && nextMilestoneReady;
+  const showOpenMilestoneVote =
+    projectIsAwaitingVote &&
+    pendingMilestoneReady &&
+    !input.isProposerViewer &&
+    !input.viewerIsTeamMember;
+  const showFinishProject = projectIsReadyToFinish && input.isProposerViewer;
+
+  const commandAllowed = canUseAuthenticatedCommand(input);
+  const canJoinProject = showJoinProject && commandAllowed && viewerCanJoin;
+  const canSubmitMilestone =
+    showSubmitMilestone && commandAllowed && viewerCanSubmitMilestone;
+  const canOpenMilestoneVote =
+    showOpenMilestoneVote && viewerCanOpenMilestoneVote;
+  const canFinishProject =
+    showFinishProject && commandAllowed && viewerCanFinishProject;
+
+  let statusMessage: string | null = null;
+  if (
+    !showJoinProject &&
+    !showSubmitMilestone &&
+    !showOpenMilestoneVote &&
+    !showFinishProject
+  ) {
+    if (input.projectState === "completed") {
+      statusMessage = "This Formation project is finished.";
+    } else if (input.projectState === "canceled") {
+      statusMessage = "This Formation project was canceled.";
+    } else if (input.viewerIsTeamMember) {
+      statusMessage =
+        "You are on this Formation team. No team action is available right now.";
+    } else if (!input.hasOpenRoles && projectIsActive) {
+      statusMessage = "No open team slots are available right now.";
+    } else {
+      statusMessage = "No Formation action is available right now.";
+    }
+  }
+
+  return {
+    canFinishProject,
+    canJoinProject,
+    canOpenMilestoneVote,
+    canSubmitMilestone,
+    showFinishProject,
+    showJoinProject,
+    showOpenMilestoneVote,
+    showSubmitMilestone,
+    statusMessage,
+  };
+}
diff --git a/src/lib/humanNodesUi.ts b/src/lib/humanNodesUi.ts
index e281716..6b1f6c2 100644
--- a/src/lib/humanNodesUi.ts
+++ b/src/lib/humanNodesUi.ts
@@ -126,7 +126,7 @@ export function getHumanNodeVisibleHeroStats(
 ): HumanNodeProfileDto["heroStats"] {
   return heroStats.filter((stat) => {
     const label = stat.label.trim().toUpperCase();
-    return !["ACM", "LCM", "MCM", "MM"].includes(label);
+    return !["LCM", "MCM", "MM"].includes(label);
   });
 }
 
diff --git a/src/lib/textPreview.ts b/src/lib/textPreview.ts
new file mode 100644
index 0000000..433afe2
--- /dev/null
+++ b/src/lib/textPreview.ts
@@ -0,0 +1,18 @@
+export const PROPOSAL_SUMMARY_PREVIEW_MAX = 180;
+
+export function proposalSummaryPreview(
+  value: string,
+  maxLength = PROPOSAL_SUMMARY_PREVIEW_MAX,
+): string {
+  const text = value.replace(/\s+/g, " ").trim();
+  if (text.length <= maxLength) return text;
+
+  const hardCut = text.slice(0, maxLength + 1);
+  const wordCut = hardCut.lastIndexOf(" ");
+  const cutAt = wordCut >= Math.floor(maxLength * 0.72) ? wordCut : maxLength;
+
+  return text
+    .slice(0, cutAt)
+    .trim()
+    .replace(/[\s,;:./\\-]+$/g, "");
+}
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index 84d80f9..db2e86f 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -1,4 +1,4 @@
-const themes = ["sky", "light", "night"] as const;
+const themes = ["sky", "light", "night", "fire"] as const;
 export type Theme = (typeof themes)[number];
 
 const STORAGE_KEY = "vortex.theme";
diff --git a/src/lib/usePrefersReducedMotion.ts b/src/lib/usePrefersReducedMotion.ts
index 623dc24..6a32c20 100644
--- a/src/lib/usePrefersReducedMotion.ts
+++ b/src/lib/usePrefersReducedMotion.ts
@@ -4,6 +4,8 @@ export function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
 
   React.useEffect(() => {
+    if (!window.matchMedia) return;
+
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     const onChange = () => setPrefersReducedMotion(mediaQuery.matches);
     onChange();
diff --git a/src/pages/General.tsx b/src/pages/General.tsx
index 5fecbc3..c2baaf7 100644
--- a/src/pages/General.tsx
+++ b/src/pages/General.tsx
@@ -43,7 +43,8 @@ const General: React.FC = () => {
             <div className="space-y-1">
               <p className="font-semibold text-text">Theme</p>
               <p className="text-sm text-muted">
-                Sky/Light affect the main UI; Night also darkens the sidebar.
+                Sky and Light keep the interface bright; Night and Fire darken
+                the whole simulator.
               </p>
             </div>
             <ToggleGroup
@@ -53,6 +54,7 @@ const General: React.FC = () => {
                 { value: "sky", label: "Sky" },
                 { value: "light", label: "Light" },
                 { value: "night", label: "Night" },
+                { value: "fire", label: "Fire" },
               ]}
             />
           </div>
diff --git a/src/pages/MyGovernance.tsx b/src/pages/MyGovernance.tsx
index 334fdb6..7e51493 100644
--- a/src/pages/MyGovernance.tsx
+++ b/src/pages/MyGovernance.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { Surface } from "@/components/Surface";
+import { useAuth } from "@/app/auth/AuthContext";
+import { GlassyTile } from "@/components/GlassySection";
 import { PageHint } from "@/components/PageHint";
 import {
   apiDelegationClear,
@@ -22,7 +23,6 @@ import { MyGovernanceDelegationCard } from "./my-governance/components/MyGoverna
 import { MyGovernanceLegitimacyCard } from "./my-governance/components/MyGovernanceLegitimacyCard";
 import { MyGovernanceProgressionCard } from "./my-governance/components/MyGovernanceProgressionCard";
 import { MyGovernanceThresholdCard } from "./my-governance/components/MyGovernanceThresholdCard";
-import { MyGovernanceVetoProcessCard } from "./my-governance/components/MyGovernanceVetoProcessCard";
 import { useMyGovernancePageData } from "./my-governance/hooks/useMyGovernancePageData";
 
 const MyGovernance: React.FC = () => {
@@ -35,15 +35,15 @@ const MyGovernance: React.FC = () => {
     Record<string, string | null>
   >({});
   const [nowMs, setNowMs] = useState<number>(() => Date.now());
+  const auth = useAuth();
   const {
     chambers,
     clock,
     cmSummary,
-    delegationDrafts,
+    delegationGovernorsByChamber,
     gov,
     loadError,
     refreshGovernance,
-    updateDelegationDraft,
   } = useMyGovernancePageData();
 
   useEffect(() => {
@@ -71,10 +71,7 @@ const MyGovernance: React.FC = () => {
     return (
       <div className="flex flex-col gap-6">
         <PageHint pageId="my-governance" />
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
+        <GlassyTile
           className={cn(
             "px-5 py-4 text-sm text-muted",
             loadError ? "text-destructive" : undefined,
@@ -83,7 +80,7 @@ const MyGovernance: React.FC = () => {
           {loadError
             ? `My governance unavailable: ${formatLoadError(loadError)}`
             : "Loading…"}
-        </Surface>
+        </GlassyTile>
       </div>
     );
   }
@@ -107,12 +104,14 @@ const MyGovernance: React.FC = () => {
     triggerThresholdPercent: 33.3,
   };
 
-  const handleDelegationSet = async (chamberId: string) => {
-    const delegateeAddress = delegationDrafts[chamberId]?.trim() ?? "";
+  const handleDelegationSet = async (
+    chamberId: string,
+    delegateeAddress: string,
+  ) => {
     if (!delegateeAddress) {
       setDelegationErrorByChamber((current) => ({
         ...current,
-        [chamberId]: "Enter an address to delegate to.",
+        [chamberId]: "Choose a governor to delegate to.",
       }));
       return;
     }
@@ -199,29 +198,33 @@ const MyGovernance: React.FC = () => {
 
       <MyGovernanceProgressionCard tierProgress={gov.tier} />
 
-      <MyGovernanceVetoProcessCard />
-
       <MyGovernanceChambersCard myChambers={myChambers} />
 
-      <MyGovernanceCmEconomyCard cmSummary={cmSummary} />
-
-      <MyGovernanceDelegationCard
-        chambers={chambers}
-        delegationChambers={gov.delegation.chambers}
-        delegationDrafts={delegationDrafts}
-        delegationErrorByChamber={delegationErrorByChamber}
-        delegationPendingByChamber={delegationPendingByChamber}
-        onClearDelegation={(chamberId) => void handleDelegationClear(chamberId)}
-        onSetDelegation={(chamberId) => void handleDelegationSet(chamberId)}
-        onUpdateDelegationDraft={updateDelegationDraft}
-      />
-
-      <MyGovernanceLegitimacyCard
-        legitimacy={legitimacy}
-        legitimacyError={legitimacyError}
-        legitimacyPending={legitimacyPending}
-        onToggleLegitimacy={handleLegitimacyToggle}
-      />
+      <div className="grid items-start gap-4 xl:grid-cols-3">
+        <MyGovernanceCmEconomyCard cmSummary={cmSummary} />
+
+        <MyGovernanceDelegationCard
+          chambers={chambers}
+          delegationChambers={gov.delegation.chambers}
+          delegationErrorByChamber={delegationErrorByChamber}
+          delegationGovernorsByChamber={delegationGovernorsByChamber}
+          delegationPendingByChamber={delegationPendingByChamber}
+          onClearDelegation={(chamberId) =>
+            void handleDelegationClear(chamberId)
+          }
+          onSetDelegation={(chamberId, delegateeAddress) =>
+            void handleDelegationSet(chamberId, delegateeAddress)
+          }
+          viewerAddress={auth.address}
+        />
+
+        <MyGovernanceLegitimacyCard
+          legitimacy={legitimacy}
+          legitimacyError={legitimacyError}
+          legitimacyPending={legitimacyPending}
+          onToggleLegitimacy={handleLegitimacyToggle}
+        />
+      </div>
     </div>
   );
 };
diff --git a/src/pages/chambers/Chamber.tsx b/src/pages/chambers/Chamber.tsx
index 134bcc5..3459087 100644
--- a/src/pages/chambers/Chamber.tsx
+++ b/src/pages/chambers/Chamber.tsx
@@ -3,20 +3,20 @@ import { useParams, Link, useSearchParams } from "react-router";
 
 import { Button } from "@/components/primitives/button";
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
-import { Badge } from "@/components/primitives/badge";
+  GlassyCompactGrid,
+  GlassyCompactMetric,
+  GlassyCompactRow,
+  GlassyKeyValue,
+  GlassySection,
+  GlassyStatusChip,
+  GlassyTile,
+  GlassyTileHeading,
+} from "@/components/GlassySection";
+import { GlassyRecordCard } from "@/components/GlassyRecordCard";
 import { Input } from "@/components/primitives/input";
-import { Kicker } from "@/components/Kicker";
 import { Surface } from "@/components/Surface";
 import { PageHint } from "@/components/PageHint";
-import { PageHeader } from "@/components/PageHeader";
 import { TierLabel } from "@/components/TierLabel";
-import { PipelineList } from "@/components/PipelineList";
-import { StatGrid, makeChamberStats } from "@/components/StatGrid";
 import { AddressInline } from "@/components/AddressInline";
 import type {
   ChamberChatPeerDto,
@@ -48,6 +48,32 @@ import { formatLoadError } from "@/lib/errorFormatting";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
 import { useAuth } from "@/app/auth/AuthContext";
 import { addressesReferToSameIdentity } from "@/lib/addressIdentity";
+import { formatChamberMultiplier } from "./components/ChamberVisuals";
+import type { ProposalStage } from "@/types/stages";
+
+const chamberProposalStageLabels: Record<ChamberProposalStageDto, string> = {
+  upcoming: "Proposal pool",
+  live: "Chamber vote",
+  ended: "Formation",
+};
+
+const chamberProposalRecordStage: Record<
+  ChamberProposalStageDto,
+  ProposalStage
+> = {
+  upcoming: "pool",
+  live: "vote",
+  ended: "build",
+};
+
+const chamberProposalStageCountKey: Record<
+  ChamberProposalStageDto,
+  "build" | "pool" | "vote"
+> = {
+  upcoming: "pool",
+  live: "vote",
+  ended: "build",
+};
 
 const Chamber: React.FC = () => {
   const { id } = useParams();
@@ -95,6 +121,9 @@ const Chamber: React.FC = () => {
 
   const [stageFilter, setStageFilter] =
     useState<ChamberProposalStageDto>("upcoming");
+  const [expandedProposalId, setExpandedProposalId] = useState<string | null>(
+    null,
+  );
   const [governorSearch, setGovernorSearch] = useState("");
   const requestedThreadId = searchParams.get("thread")?.trim() || null;
 
@@ -213,8 +242,6 @@ const Chamber: React.FC = () => {
     const chamber = data?.chamber;
     if (!chamber) return [];
     const items = [
-      { label: "Status", value: chamber.status },
-      { label: "Multiplier", value: chamber.multiplier.toFixed(1) },
       { label: "Created", value: formatDate(chamber.createdAt) },
       { label: "Origin", value: chamber.createdByProposalId ?? "Genesis" },
     ];
@@ -605,11 +632,6 @@ const Chamber: React.FC = () => {
   return (
     <div className="flex flex-col gap-6">
       <PageHint pageId="chamber" />
-      <PageHeader
-        eyebrow="Chamber detail"
-        title={<span className="capitalize">{chamberTitle}</span>}
-        description="Proposal status, governor roster, and forum activity for this chamber."
-      />
 
       {loadError ? (
         <Surface
@@ -621,224 +643,142 @@ const Chamber: React.FC = () => {
           Chamber unavailable: {formatLoadError(loadError)}
         </Surface>
       ) : null}
+      {!data && !loadError ? (
+        <GlassyTile className="px-5 py-4 text-sm text-muted">
+          Loading chamber…
+        </GlassyTile>
+      ) : null}
 
       {data ? (
-        <div className="grid gap-4 lg:grid-cols-3">
-          <Card>
-            <CardHeader className="pb-3">
-              <Kicker>Chamber profile</Kicker>
-              <CardTitle>Overview</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-3 text-sm sm:grid-cols-2">
-              {chamberMetaItems.map((item) => (
-                <Surface
-                  key={item.label}
-                  variant="panelAlt"
-                  radius="xl"
-                  shadow="tile"
-                  className="px-3 py-2"
-                >
-                  <Kicker className="text-text">{item.label}</Kicker>
-                  <p className="text-base font-semibold text-text">
-                    {item.value}
-                  </p>
-                </Surface>
-              ))}
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="pb-3">
-              <Kicker>Chamber stats</Kicker>
-              <CardTitle>Governance metrics</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <StatGrid items={makeChamberStats(chamberStats)} />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="pb-3">
-              <Kicker>Pipeline</Kicker>
-              <CardTitle>Proposal flow</CardTitle>
-            </CardHeader>
-            <CardContent>
-              {data.pipeline ? (
-                <PipelineList pipeline={data.pipeline} />
-              ) : (
-                <Surface
-                  variant="panelAlt"
-                  radius="xl"
-                  borderStyle="dashed"
-                  className="px-3 py-4 text-center text-sm text-muted"
-                >
-                  No pipeline data yet.
-                </Surface>
-              )}
-            </CardContent>
-          </Card>
-        </div>
+        <GlassySection
+          title={<span className="capitalize">{chamberTitle}</span>}
+        >
+          <GlassyCompactGrid className="sm:grid-cols-2 lg:grid-cols-4">
+            <GlassyCompactMetric
+              label="Multiplier"
+              value={formatChamberMultiplier(data.chamber.multiplier)}
+            />
+            {chamberMetaItems.map((item) => (
+              <GlassyCompactMetric
+                key={item.label}
+                label={item.label}
+                value={item.value}
+              />
+            ))}
+            <GlassyCompactMetric
+              label="Governors"
+              value={chamberStats.governors}
+            />
+            <GlassyCompactMetric
+              label="Members' ACM"
+              value={chamberStats.acm}
+            />
+            <GlassyCompactMetric label="LCM" value={chamberStats.lcm} />
+            <GlassyCompactMetric label="MCM" value={chamberStats.mcm} />
+          </GlassyCompactGrid>
+        </GlassySection>
       ) : null}
 
       {data ? (
-        <Card>
-          <CardHeader className="pb-3">
-            <Kicker>CM economy</Kicker>
-            <CardTitle>Chamber CM summary</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {cmData ? (
-              <>
-                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-                  {[
-                    { label: "LCM", value: cmData.totals.lcm },
-                    { label: "MCM", value: cmData.totals.mcm },
-                    { label: "ACM", value: cmData.totals.acm },
-                    {
-                      label: "Avg multiplier",
-                      value:
-                        cmData.avgMultiplier === null
-                          ? "—"
-                          : `M × ${cmData.avgMultiplier.toFixed(2)}`,
-                    },
-                  ].map((tile) => (
-                    <Surface
-                      key={tile.label}
-                      variant="panelAlt"
-                      radius="xl"
-                      shadow="tile"
-                      className="px-3 py-3 text-center"
-                    >
-                      <Kicker align="center">{tile.label}</Kicker>
-                      <p className="text-base font-semibold text-text">
-                        {typeof tile.value === "number"
-                          ? tile.value.toLocaleString()
-                          : tile.value}
-                      </p>
-                    </Surface>
-                  ))}
-                </div>
-
-                <div className="grid gap-3 lg:grid-cols-3">
-                  <Surface
-                    variant="panelAlt"
-                    radius="xl"
-                    shadow="tile"
-                    className="px-4 py-3"
-                  >
-                    <Kicker>Top contributors</Kicker>
-                    {cmData.topContributors.length === 0 ? (
-                      <p className="mt-2 text-sm text-muted">
-                        No CM contributions yet.
-                      </p>
-                    ) : (
-                      <ul className="mt-2 space-y-2 text-sm text-text">
-                        {cmData.topContributors.slice(0, 5).map((entry) => (
-                          <li
-                            key={entry.address}
-                            className="flex flex-wrap items-center justify-between gap-2"
-                          >
-                            <AddressInline
-                              address={entry.address}
-                              className="min-w-0 flex-1"
-                              textClassName="[overflow-wrap:anywhere] break-words"
-                            />
-                            <span className="text-xs text-muted">
-                              LCM {entry.lcm} · MCM {entry.mcm} · ACM{" "}
-                              {entry.acm}
-                            </span>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                  </Surface>
+        <GlassySection title="Chamber CM activity">
+          {cmData ? (
+            <div className="grid gap-3 lg:grid-cols-3">
+              <GlassyTile className="space-y-3">
+                <GlassyTileHeading>Top contributors</GlassyTileHeading>
+                {cmData.topContributors.length === 0 ? (
+                  <p className="m-0 text-sm text-muted">
+                    No CM contributions yet.
+                  </p>
+                ) : (
+                  <ul className="m-0 space-y-2 p-0 text-sm text-text">
+                    {cmData.topContributors.slice(0, 5).map((entry) => (
+                      <li
+                        key={entry.address}
+                        className="flex flex-wrap items-center justify-between gap-2 rounded-[8px] border border-[color:var(--surface-glass-border)] px-3 py-2"
+                      >
+                        <AddressInline
+                          address={entry.address}
+                          className="min-w-0 flex-1"
+                          textClassName="[overflow-wrap:anywhere] break-words"
+                        />
+                        <span className="text-xs text-muted">
+                          LCM {entry.lcm} · MCM {entry.mcm} · ACM contribution{" "}
+                          {entry.acm}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </GlassyTile>
 
-                  <Surface
-                    variant="panelAlt"
-                    radius="xl"
-                    shadow="tile"
-                    className="px-4 py-3"
-                  >
-                    <Kicker>Multiplier submissions</Kicker>
-                    {cmData.submissions.length === 0 ? (
-                      <p className="mt-2 text-sm text-muted">
-                        No multiplier submissions yet.
-                      </p>
-                    ) : (
-                      <ul className="mt-2 space-y-2 text-sm text-text">
-                        {cmData.submissions.slice(0, 5).map((entry) => (
-                          <li
-                            key={`${entry.address}-${entry.submittedAt}`}
-                            className="flex flex-col gap-1"
-                          >
-                            <AddressInline
-                              address={entry.address}
-                              className="min-w-0"
-                              textClassName="font-semibold [overflow-wrap:anywhere] break-words"
-                            />
-                            <span className="text-xs text-muted">
-                              M × {entry.multiplier} ·{" "}
-                              {formatDate(entry.submittedAt)}
-                            </span>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                  </Surface>
+              <GlassyTile className="space-y-3">
+                <GlassyTileHeading>Multiplier submissions</GlassyTileHeading>
+                {cmData.submissions.length === 0 ? (
+                  <p className="m-0 text-sm text-muted">
+                    No multiplier submissions yet.
+                  </p>
+                ) : (
+                  <ul className="m-0 space-y-2 p-0 text-sm text-text">
+                    {cmData.submissions.slice(0, 5).map((entry) => (
+                      <li
+                        key={`${entry.address}-${entry.submittedAt}`}
+                        className="flex flex-col gap-1 rounded-[8px] border border-[color:var(--surface-glass-border)] px-3 py-2"
+                      >
+                        <AddressInline
+                          address={entry.address}
+                          className="min-w-0"
+                          textClassName="font-semibold [overflow-wrap:anywhere] break-words"
+                        />
+                        <span className="text-xs text-muted">
+                          M × {entry.multiplier} ·{" "}
+                          {formatDate(entry.submittedAt)}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </GlassyTile>
 
-                  <Surface
-                    variant="panelAlt"
-                    radius="xl"
-                    shadow="tile"
-                    className="px-4 py-3"
-                  >
-                    <Kicker>Recent CM awards</Kicker>
-                    {cmData.history.length === 0 ? (
-                      <p className="mt-2 text-sm text-muted">
-                        No CM awards yet.
-                      </p>
-                    ) : (
-                      <ul className="mt-2 space-y-2 text-sm text-text">
-                        {cmData.history.slice(0, 4).map((entry) => (
-                          <li
-                            key={`${entry.proposalId}-${entry.awardedAt}`}
-                            className="flex flex-col gap-1"
-                          >
-                            <span className="font-semibold">{entry.title}</span>
-                            <span className="text-xs text-muted">
-                              M × {entry.multiplier} · LCM {entry.lcm} · MCM{" "}
-                              {entry.mcm}
-                            </span>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                  </Surface>
-                </div>
-              </>
-            ) : (
-              <Surface
-                variant="panelAlt"
-                radius="xl"
-                borderStyle="dashed"
-                className="px-4 py-4 text-center text-sm text-muted"
-              >
-                {cmError
-                  ? `CM summary unavailable: ${formatLoadError(cmError)}`
-                  : "Loading CM…"}
-              </Surface>
-            )}
-          </CardContent>
-        </Card>
+              <GlassyTile className="space-y-3">
+                <GlassyTileHeading>Recent CM awards</GlassyTileHeading>
+                {cmData.history.length === 0 ? (
+                  <p className="m-0 text-sm text-muted">No CM awards yet.</p>
+                ) : (
+                  <ul className="m-0 space-y-2 p-0 text-sm text-text">
+                    {cmData.history.slice(0, 4).map((entry) => (
+                      <li
+                        key={`${entry.proposalId}-${entry.awardedAt}`}
+                        className="flex flex-col gap-1 rounded-[8px] border border-[color:var(--surface-glass-border)] px-3 py-2"
+                      >
+                        <span className="font-semibold">{entry.title}</span>
+                        <span className="text-xs text-muted">
+                          M × {entry.multiplier} · LCM {entry.lcm} · MCM{" "}
+                          {entry.mcm}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </GlassyTile>
+            </div>
+          ) : (
+            <Surface
+              variant="panelAlt"
+              radius="xl"
+              borderStyle="dashed"
+              className="px-4 py-4 text-center text-sm text-muted"
+            >
+              {cmError
+                ? `CM summary unavailable: ${formatLoadError(cmError)}`
+                : "Loading CM…"}
+            </Surface>
+          )}
+        </GlassySection>
       ) : null}
 
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
-        <Card>
-          <CardHeader className="flex flex-col gap-4 pb-4">
-            <div>
-              <Kicker>Chamber vote</Kicker>
-              <CardTitle>Proposal status</CardTitle>
-            </div>
+      {data ? (
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
+          <GlassySection title="Proposal status">
             <div
               className="flex w-full flex-wrap justify-center gap-2"
               role="tablist"
@@ -846,6 +786,8 @@ const Chamber: React.FC = () => {
             >
               {(data?.stageOptions ?? []).map((option) => {
                 const isSelected = stageFilter === option.value;
+                const countKey = chamberProposalStageCountKey[option.value];
+                const count = data.pipeline?.[countKey] ?? 0;
                 return (
                   <Button
                     key={option.value}
@@ -854,20 +796,26 @@ const Chamber: React.FC = () => {
                     size="sm"
                     aria-selected={isSelected}
                     variant="ghost"
-                    onClick={() => setStageFilter(option.value)}
+                    onClick={() => {
+                      setStageFilter(option.value);
+                      setExpandedProposalId(null);
+                    }}
                     className={
                       isSelected
                         ? "border-(--glass-border-strong) bg-(--btn-primary-active-bg) text-primary-foreground shadow-(--shadow-primary) filter-[saturate(1.35)]"
                         : "border-border bg-panel text-muted hover:text-primary"
                     }
                   >
-                    {option.label}
+                    <span>
+                      {chamberProposalStageLabels[option.value] ?? option.label}
+                    </span>
+                    <span className="ml-2 rounded-full bg-[color:var(--control-glass-bg)] px-2 py-0.5 text-xs">
+                      {count}
+                    </span>
                   </Button>
                 );
               })}
             </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
             {filteredProposals.length === 0 ? (
               <Surface
                 variant="panelAlt"
@@ -885,26 +833,26 @@ const Chamber: React.FC = () => {
                     : proposal.stage === "live"
                       ? `/app/proposals/${proposal.id}/chamber`
                       : `/app/proposals/${proposal.id}/formation`);
+                const expanded = expandedProposalId === proposal.id;
                 return (
-                  <Surface key={proposal.id} variant="panelAlt" className="p-4">
-                    <div className="flex flex-wrap items-start justify-between gap-3">
-                      <div>
-                        <Kicker>{proposal.meta}</Kicker>
-                        <h3 className="text-lg font-semibold text-text">
-                          {proposal.title}
-                        </h3>
-                      </div>
-                      <Badge
-                        variant="outline"
-                        size="sm"
-                        className="font-semibold"
-                      >
-                        Lead {proposal.lead}
-                      </Badge>
-                    </div>
-                    <p className="mt-2 text-sm text-text">{proposal.summary}</p>
+                  <GlassyRecordCard
+                    key={proposal.id}
+                    dateText={proposal.timing}
+                    expanded={expanded}
+                    meta={proposal.meta}
+                    onToggle={() =>
+                      setExpandedProposalId((current) =>
+                        current === proposal.id ? null : proposal.id,
+                      )
+                    }
+                    rail={expanded ? "action" : "idle"}
+                    stage={chamberProposalRecordStage[proposal.stage]}
+                    summary={proposal.summary}
+                    title={proposal.title}
+                  >
                     {(() => {
                       const metaTiles = [
+                        { label: "Lead", value: proposal.lead },
                         { label: "Next step", value: proposal.nextStep },
                         { label: "Timing", value: proposal.timing },
                       ];
@@ -915,86 +863,90 @@ const Chamber: React.FC = () => {
                         });
                       }
                       const columns =
-                        metaTiles.length === 3
-                          ? "sm:grid-cols-3"
-                          : "sm:grid-cols-2";
+                        metaTiles.length === 4
+                          ? "sm:grid-cols-2 xl:grid-cols-4"
+                          : "sm:grid-cols-3";
                       return (
                         <div
-                          className={`mt-3 grid gap-2 text-sm text-muted ${columns}`}
+                          className={`grid gap-2 text-sm text-muted ${columns}`}
                         >
                           {metaTiles.map((tile) => (
-                            <Surface
+                            <GlassyKeyValue
                               key={tile.label}
-                              variant="panel"
-                              radius="xl"
-                              shadow="control"
-                              className="px-3 py-2"
-                            >
-                              <Kicker className="text-text">
-                                {tile.label}
-                              </Kicker>
-                              <p className="text-sm font-semibold text-text">
-                                {tile.value}
-                              </p>
-                            </Surface>
+                              className="glassy-key-value--stacked glassy-key-value--metric"
+                              label={tile.label}
+                              value={tile.value}
+                            />
                           ))}
                         </div>
                       );
                     })()}
-                    <div className="mt-3 flex justify-end">
+                    <div className="flex justify-end">
                       <Button asChild size="sm">
                         <Link to={proposalHref}>Open proposal</Link>
                       </Button>
                     </div>
-                  </Surface>
+                  </GlassyRecordCard>
                 );
               })
             )}
-          </CardContent>
-        </Card>
+          </GlassySection>
 
-        <Card>
-          <CardHeader className="flex flex-col gap-3 pb-3 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <Kicker>Governors</Kicker>
-              <CardTitle>Chamber roster</CardTitle>
-            </div>
-            <span className="rounded-full border border-border bg-panel-alt px-3 py-1 text-sm font-semibold">
-              {data?.governors.length ?? 0}
-            </span>
-          </CardHeader>
-          <CardContent className="space-y-4">
+          <GlassySection
+            title={
+              <span className="flex w-full items-center justify-between gap-3">
+                <span>Chamber roster</span>
+                <GlassyStatusChip tone="neutral">
+                  {data?.governors.length ?? 0}
+                </GlassyStatusChip>
+              </span>
+            }
+          >
             <Input
               value={governorSearch}
               onChange={(event) => setGovernorSearch(event.target.value)}
               placeholder="Search governors"
             />
-            <ul className="max-h-none space-y-2 overflow-visible pr-0 text-sm text-text lg:max-h-[360px] lg:overflow-auto lg:pr-1">
+            <ul className="max-h-none space-y-2 overflow-visible p-0 pr-0 text-sm text-text lg:max-h-[360px] lg:overflow-auto lg:pr-1">
               {filteredGovernors.map((gov) => (
-                <Surface
-                  as="li"
-                  key={gov.id}
-                  variant="panelAlt"
-                  radius="xl"
-                  shadow="control"
-                  className="flex flex-col gap-2 px-3 py-2 sm:flex-row sm:items-center sm:justify-between"
-                >
-                  <div>
-                    <p className="font-semibold">{gov.name}</p>
-                    <p className="text-xs text-muted">
+                <li key={gov.id}>
+                  <GlassyCompactRow
+                    title={gov.name}
+                    actions={
+                      <Button asChild size="compact" variant="ghost">
+                        <Link to={`/app/human-nodes/${gov.id}`}>Profile</Link>
+                      </Button>
+                    }
+                  >
+                    <p className="m-0 text-xs text-muted">
                       <TierLabel tier={gov.tier} /> · {gov.focus}
                     </p>
-                    <p className="text-xs text-muted">
-                      Vote power {gov.effectiveVotingPower}
-                      {gov.delegatedWeight > 0
-                        ? ` · Carries +${gov.delegatedWeight} delegated`
-                        : ""}
-                    </p>
-                    <p className="text-xs text-muted">
-                      ACM {gov.acm.toLocaleString()} · LCM{" "}
-                      {gov.lcm.toLocaleString()} · MCM{" "}
-                      {gov.mcm.toLocaleString()}
-                    </p>
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      <GlassyKeyValue
+                        className="glassy-key-value--stacked glassy-key-value--metric"
+                        label="Vote power"
+                        value={
+                          gov.delegatedWeight > 0
+                            ? `${gov.effectiveVotingPower} (+${gov.delegatedWeight})`
+                            : gov.effectiveVotingPower
+                        }
+                      />
+                      <GlassyKeyValue
+                        className="glassy-key-value--stacked glassy-key-value--metric"
+                        label="Members' ACM"
+                        value={gov.acm.toLocaleString()}
+                      />
+                      <GlassyKeyValue
+                        className="glassy-key-value--stacked glassy-key-value--metric"
+                        label="LCM"
+                        value={gov.lcm.toLocaleString()}
+                      />
+                      <GlassyKeyValue
+                        className="glassy-key-value--stacked glassy-key-value--metric"
+                        label="MCM"
+                        value={gov.mcm.toLocaleString()}
+                      />
+                    </div>
                     {gov.delegateeAddress ? (
                       <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-muted">
                         <span>Delegates to</span>
@@ -1016,11 +968,8 @@ const Chamber: React.FC = () => {
                         ))}
                       </div>
                     ) : null}
-                  </div>
-                  <Button asChild size="sm" variant="ghost">
-                    <Link to={`/app/human-nodes/${gov.id}`}>Profile</Link>
-                  </Button>
-                </Surface>
+                  </GlassyCompactRow>
+                </li>
               ))}
               {filteredGovernors.length === 0 && (
                 <Surface
@@ -1034,155 +983,42 @@ const Chamber: React.FC = () => {
                 </Surface>
               )}
             </ul>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Surface
-        as="section"
-        variant="panel"
-        radius="2xl"
-        shadow="card"
-        className="p-5"
-      >
-        <header className="mb-4 flex flex-col gap-3 border-b border-border pb-4 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <Kicker>Chamber forum</Kicker>
-            <h2 className="text-lg font-semibold text-text">Threads & chat</h2>
-          </div>
-        </header>
+          </GlassySection>
+        </div>
+      ) : null}
 
-        <div className="grid gap-5 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]">
-          <div className="space-y-4">
-            <Surface variant="panelAlt" className="p-4">
-              <header className="text-sm font-semibold text-text">
-                Start a thread
-              </header>
-              <form onSubmit={handleThreadCreate} className="mt-3 space-y-3">
-                <Input
-                  value={threadTitle}
-                  onChange={(event) => setThreadTitle(event.target.value)}
-                  placeholder="Thread title"
-                  disabled={!canWrite || threadBusy}
-                />
-                <textarea
-                  value={threadBody}
-                  onChange={(event) => setThreadBody(event.target.value)}
-                  placeholder="Write the opening post"
-                  disabled={!canWrite || threadBusy}
-                  className="min-h-[110px] w-full resize-y rounded-xl border border-border bg-panel-alt px-3 py-2 text-sm text-text shadow-[var(--shadow-control)] focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none"
-                />
-                {threadError ? (
-                  <p className="text-sm text-destructive">
-                    {formatLoadError(threadError)}
-                  </p>
-                ) : null}
-                <div className="flex flex-wrap items-center gap-2">
-                  <Button
-                    type="submit"
-                    size="sm"
+      {data ? (
+        <GlassySection title="Threads & chat">
+          <div className="grid gap-5 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]">
+            <div className="space-y-4">
+              <GlassyTile>
+                <GlassyTileHeading>Start a thread</GlassyTileHeading>
+                <form onSubmit={handleThreadCreate} className="mt-3 space-y-3">
+                  <Input
+                    value={threadTitle}
+                    onChange={(event) => setThreadTitle(event.target.value)}
+                    placeholder="Thread title"
                     disabled={!canWrite || threadBusy}
-                  >
-                    {threadBusy ? "Posting..." : "Post thread"}
-                  </Button>
-                  {!canWrite ? (
-                    <span className="text-xs text-muted">
-                      Read-only for non-members.
-                    </span>
-                  ) : null}
-                </div>
-              </form>
-            </Surface>
-
-            {threads.length === 0 ? (
-              <NoDataYetBar label="threads" />
-            ) : (
-              threads.map((thread) => (
-                <article key={thread.id} className="contents">
-                  <Surface variant="panelAlt" className="px-4 py-3">
-                    <div className="flex flex-wrap items-start justify-between gap-2">
-                      <div>
-                        <h3 className="text-base font-semibold text-text">
-                          {thread.title}
-                        </h3>
-                        <p className="text-sm text-muted">
-                          {thread.author} · {thread.replies} replies · Updated{" "}
-                          {formatDateTime(thread.updated)}
-                        </p>
-                      </div>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => handleThreadSelect(thread.id)}
-                      >
-                        Open
-                      </Button>
-                    </div>
-                  </Surface>
-                </article>
-              ))
-            )}
-
-            {threadDetailError ? (
-              <Surface
-                variant="panelAlt"
-                radius="xl"
-                className="px-4 py-3 text-sm text-destructive"
-              >
-                {formatLoadError(threadDetailError)}
-              </Surface>
-            ) : null}
-
-            {activeThread ? (
-              <Surface variant="panelAlt" className="p-4">
-                <header className="mb-2 text-sm font-semibold text-text">
-                  {activeThread.thread.title}
-                </header>
-                <p className="text-sm text-muted">
-                  {activeThread.thread.author} ·{" "}
-                  {formatDateTime(activeThread.thread.createdAt)}
-                </p>
-                <p className="mt-3 text-sm text-text">
-                  {activeThread.thread.body}
-                </p>
-                <div className="mt-4 space-y-2 text-sm">
-                  {threadMessages.length === 0 ? (
-                    <p className="text-muted">No replies yet.</p>
-                  ) : (
-                    threadMessages.map((message) => (
-                      <Surface
-                        key={message.id}
-                        variant="panel"
-                        className="px-3 py-2"
-                      >
-                        <p className="text-xs text-muted">
-                          {message.author} · {formatDateTime(message.createdAt)}
-                        </p>
-                        <p className="text-sm text-text">{message.message}</p>
-                      </Surface>
-                    ))
-                  )}
-                </div>
-                <form onSubmit={handleThreadReply} className="mt-4 space-y-3">
+                  />
                   <textarea
-                    value={threadReplyBody}
-                    onChange={(event) => setThreadReplyBody(event.target.value)}
-                    placeholder="Write a reply"
-                    disabled={!canWrite || threadReplyBusy}
-                    className="min-h-[90px] w-full resize-y rounded-xl border border-border bg-panel-alt px-3 py-2 text-sm text-text shadow-[var(--shadow-control)] focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none"
+                    value={threadBody}
+                    onChange={(event) => setThreadBody(event.target.value)}
+                    placeholder="Write the opening post"
+                    disabled={!canWrite || threadBusy}
+                    className="min-h-[110px] w-full resize-y rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] px-3 py-2 text-sm text-text shadow-[var(--shadow-control)] transition hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none supports-[backdrop-filter]:backdrop-blur-md"
                   />
-                  {threadReplyError ? (
+                  {threadError ? (
                     <p className="text-sm text-destructive">
-                      {formatLoadError(threadReplyError)}
+                      {formatLoadError(threadError)}
                     </p>
                   ) : null}
                   <div className="flex flex-wrap items-center gap-2">
                     <Button
                       type="submit"
                       size="sm"
-                      disabled={!canWrite || threadReplyBusy}
+                      disabled={!canWrite || threadBusy}
                     >
-                      {threadReplyBusy ? "Posting..." : "Reply"}
+                      {threadBusy ? "Posting..." : "Post thread"}
                     </Button>
                     {!canWrite ? (
                       <span className="text-xs text-muted">
@@ -1191,60 +1027,163 @@ const Chamber: React.FC = () => {
                     ) : null}
                   </div>
                 </form>
-              </Surface>
-            ) : null}
-          </div>
+              </GlassyTile>
 
-          <Surface variant="panelAlt" className="p-4">
-            <header className="text-sm font-semibold text-text">
-              Chamber chat
-            </header>
-            <p className="text-xs text-muted">
-              Peers online: {chatPeers.length}
-            </p>
-            <div className="my-3 max-h-64 space-y-2 overflow-auto pr-2 text-sm">
-              {chatLog.length === 0 ? (
-                <p className="text-muted">No chat messages yet.</p>
+              {threads.length === 0 ? (
+                <NoDataYetBar label="threads" />
               ) : (
-                chatLog.map((entry) => (
-                  <p key={entry.id}>
-                    <strong>{entry.author}:</strong> {entry.message}
-                  </p>
+                threads.map((thread) => (
+                  <article key={thread.id} className="contents">
+                    <GlassyTile className="px-4 py-3">
+                      <div className="flex flex-wrap items-start justify-between gap-2">
+                        <div>
+                          <GlassyTileHeading>{thread.title}</GlassyTileHeading>
+                          <p className="m-0 text-sm text-muted">
+                            {thread.author} · {thread.replies} replies · Updated{" "}
+                            {formatDateTime(thread.updated)}
+                          </p>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => handleThreadSelect(thread.id)}
+                        >
+                          Open
+                        </Button>
+                      </div>
+                    </GlassyTile>
+                  </article>
                 ))
               )}
+
+              {threadDetailError ? (
+                <Surface
+                  variant="panelAlt"
+                  radius="xl"
+                  className="px-4 py-3 text-sm text-destructive"
+                >
+                  {formatLoadError(threadDetailError)}
+                </Surface>
+              ) : null}
+
+              {activeThread ? (
+                <GlassyTile>
+                  <GlassyTileHeading>
+                    {activeThread.thread.title}
+                  </GlassyTileHeading>
+                  <p className="m-0 text-sm text-muted">
+                    {activeThread.thread.author} ·{" "}
+                    {formatDateTime(activeThread.thread.createdAt)}
+                  </p>
+                  <p className="mt-3 text-sm text-text">
+                    {activeThread.thread.body}
+                  </p>
+                  <div className="mt-4 space-y-2 text-sm">
+                    {threadMessages.length === 0 ? (
+                      <p className="text-muted">No replies yet.</p>
+                    ) : (
+                      threadMessages.map((message) => (
+                        <Surface
+                          key={message.id}
+                          variant="panel"
+                          className="px-3 py-2"
+                        >
+                          <p className="text-xs text-muted">
+                            {message.author} ·{" "}
+                            {formatDateTime(message.createdAt)}
+                          </p>
+                          <p className="text-sm text-text">{message.message}</p>
+                        </Surface>
+                      ))
+                    )}
+                  </div>
+                  <form onSubmit={handleThreadReply} className="mt-4 space-y-3">
+                    <textarea
+                      value={threadReplyBody}
+                      onChange={(event) =>
+                        setThreadReplyBody(event.target.value)
+                      }
+                      placeholder="Write a reply"
+                      disabled={!canWrite || threadReplyBusy}
+                      className="min-h-[90px] w-full resize-y rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] px-3 py-2 text-sm text-text shadow-[var(--shadow-control)] transition hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none supports-[backdrop-filter]:backdrop-blur-md"
+                    />
+                    {threadReplyError ? (
+                      <p className="text-sm text-destructive">
+                        {formatLoadError(threadReplyError)}
+                      </p>
+                    ) : null}
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Button
+                        type="submit"
+                        size="sm"
+                        disabled={!canWrite || threadReplyBusy}
+                      >
+                        {threadReplyBusy ? "Posting..." : "Reply"}
+                      </Button>
+                      {!canWrite ? (
+                        <span className="text-xs text-muted">
+                          Read-only for non-members.
+                        </span>
+                      ) : null}
+                    </div>
+                  </form>
+                </GlassyTile>
+              ) : null}
             </div>
-            <form
-              onSubmit={handleChatSend}
-              className="flex flex-col gap-2 sm:flex-row"
-            >
-              <Input
-                value={chatMessage}
-                onChange={(event) => setChatMessage(event.target.value)}
-                placeholder="Send a message"
-                disabled={!canWrite || chatBusy}
-              />
-              <Button type="submit" size="sm" disabled={!canWrite || chatBusy}>
-                {chatBusy ? "Sending..." : "Send"}
-              </Button>
-            </form>
-            {chatError ? (
-              <p className="mt-2 text-sm text-destructive">
-                {formatLoadError(chatError)}
-              </p>
-            ) : null}
-            {chatSignalError ? (
-              <p className="mt-2 text-xs text-destructive">
-                {formatLoadError(chatSignalError)}
-              </p>
-            ) : null}
-            {!canWrite ? (
-              <p className="mt-2 text-xs text-muted">
-                Read-only for non-members.
+
+            <GlassyTile>
+              <GlassyTileHeading>Chamber chat</GlassyTileHeading>
+              <p className="m-0 text-xs text-muted">
+                Peers online: {chatPeers.length}
               </p>
-            ) : null}
-          </Surface>
-        </div>
-      </Surface>
+              <div className="my-3 max-h-64 space-y-2 overflow-auto pr-2 text-sm">
+                {chatLog.length === 0 ? (
+                  <p className="text-muted">No chat messages yet.</p>
+                ) : (
+                  chatLog.map((entry) => (
+                    <p key={entry.id}>
+                      <strong>{entry.author}:</strong> {entry.message}
+                    </p>
+                  ))
+                )}
+              </div>
+              <form
+                onSubmit={handleChatSend}
+                className="flex flex-col gap-2 sm:flex-row"
+              >
+                <Input
+                  value={chatMessage}
+                  onChange={(event) => setChatMessage(event.target.value)}
+                  placeholder="Send a message"
+                  disabled={!canWrite || chatBusy}
+                />
+                <Button
+                  type="submit"
+                  size="sm"
+                  disabled={!canWrite || chatBusy}
+                >
+                  {chatBusy ? "Sending..." : "Send"}
+                </Button>
+              </form>
+              {chatError ? (
+                <p className="mt-2 text-sm text-destructive">
+                  {formatLoadError(chatError)}
+                </p>
+              ) : null}
+              {chatSignalError ? (
+                <p className="mt-2 text-xs text-destructive">
+                  {formatLoadError(chatSignalError)}
+                </p>
+              ) : null}
+              {!canWrite ? (
+                <p className="mt-2 text-xs text-muted">
+                  Read-only for non-members.
+                </p>
+              ) : null}
+            </GlassyTile>
+          </div>
+        </GlassySection>
+      ) : null}
     </div>
   );
 };
diff --git a/src/pages/chambers/Chambers.tsx b/src/pages/chambers/Chambers.tsx
index b307ef5..619e236 100644
--- a/src/pages/chambers/Chambers.tsx
+++ b/src/pages/chambers/Chambers.tsx
@@ -1,22 +1,22 @@
 import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router";
 
+import { AppCard } from "@/components/AppCard";
 import { HintLabel } from "@/components/Hint";
+import { InlineHelp } from "@/components/InlineHelp";
+import { MetricTile } from "@/components/MetricTile";
+import { NoDataYetBar } from "@/components/NoDataYetBar";
 import { PageHint } from "@/components/PageHint";
+import { PipelineList } from "@/components/PipelineList";
 import { SearchBar } from "@/components/SearchBar";
-import { MetricTile } from "@/components/MetricTile";
-import { AppCard } from "@/components/AppCard";
-import { Badge } from "@/components/primitives/badge";
 import { StatGrid, makeChamberStats } from "@/components/StatGrid";
-import { PipelineList } from "@/components/PipelineList";
+import { Surface } from "@/components/Surface";
+import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
-import { Link } from "react-router";
-import { InlineHelp } from "@/components/InlineHelp";
-import { NoDataYetBar } from "@/components/NoDataYetBar";
 import { apiChambers, apiClock, apiHumans } from "@/lib/apiClient";
 import { getChamberNumericStats } from "@/lib/dtoParsers";
 import { formatLoadError } from "@/lib/errorFormatting";
 import type { ChamberDto } from "@/types/api";
-import { Surface } from "@/components/Surface";
 
 type Metric = {
   label: string;
@@ -26,7 +26,7 @@ type Metric = {
 const metricCards: Metric[] = [
   { label: "Total chambers", value: "—" },
   { label: "Governors / Active governors", value: "—" },
-  { label: "Total ACM", value: "—" },
+  { label: "Total members' ACM", value: "—" },
   { label: "Live proposals", value: "—" },
 ];
 
@@ -137,7 +137,7 @@ const Chambers: React.FC = () => {
         value: `${governors} / ${active}`,
       },
       {
-        label: "Total ACM",
+        label: "Total members' ACM",
         value: typeof totalAcm === "number" ? totalAcm.toLocaleString() : "—",
       },
       { label: "Live proposals", value: String(liveProposals) },
@@ -151,9 +151,9 @@ const Chambers: React.FC = () => {
         <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
           {computedMetrics.map((metric) => {
             const label =
-              metric.label === "Total ACM" ? (
+              metric.label === "Total members' ACM" ? (
                 <>
-                  <span className="font-normal">Total</span>{" "}
+                  <span className="font-normal">Total members'</span>{" "}
                   <HintLabel termId="acm" termText="ACM" />
                 </>
               ) : (
@@ -215,7 +215,7 @@ const Chambers: React.FC = () => {
             options: [
               { value: "name", label: "Name (A–Z)" },
               { value: "governors", label: "Governors (desc)" },
-              { value: "acm", label: "ACM (desc)" },
+              { value: "acm", label: "Members' ACM (desc)" },
             ],
           },
         ]}
diff --git a/src/pages/chambers/components/ChamberVisuals.tsx b/src/pages/chambers/components/ChamberVisuals.tsx
new file mode 100644
index 0000000..5956ad5
--- /dev/null
+++ b/src/pages/chambers/components/ChamberVisuals.tsx
@@ -0,0 +1,155 @@
+import { Link } from "react-router";
+
+import { HintLabel } from "@/components/Hint";
+import {
+  GlassyCompactGrid,
+  GlassyCompactMetric,
+  GlassyKeyValue,
+  GlassyStatusChip,
+  GlassyTile,
+  GlassyTileHeading,
+} from "@/components/GlassySection";
+import { StageChip } from "@/components/StageChip";
+import { Button } from "@/components/primitives/button";
+import { cn } from "@/lib/utils";
+import type {
+  ChamberDto,
+  ChamberPipelineDto,
+  ChamberStatsDto,
+} from "@/types/api";
+import type { ProposalStage } from "@/types/stages";
+
+type ChamberStatsTilesProps = {
+  className?: string;
+  stats: ChamberStatsDto;
+};
+
+type ChamberPipelineTilesProps = {
+  className?: string;
+  pipeline: ChamberPipelineDto;
+};
+
+type ChamberStatusChipProps = {
+  status: "active" | "dissolved" | string;
+};
+
+type ChamberMultiplierChipProps = {
+  multiplier: number;
+};
+
+type ChamberDirectoryCardProps = {
+  chamber: ChamberDto;
+};
+
+const pipelineItems: Array<{
+  key: keyof ChamberPipelineDto;
+  label: string;
+  stage: ProposalStage;
+}> = [
+  { key: "pool", label: "Proposal pool", stage: "pool" },
+  { key: "vote", label: "Chamber vote", stage: "vote" },
+  { key: "build", label: "Formation", stage: "build" },
+];
+
+export function formatChamberMultiplier(multiplier: number): string {
+  return `M × ${Number(multiplier.toFixed(2)).toString()}`;
+}
+
+export function ChamberMultiplierChip({
+  multiplier,
+}: ChamberMultiplierChipProps) {
+  return (
+    <GlassyStatusChip tone="primary">
+      {formatChamberMultiplier(multiplier)}
+    </GlassyStatusChip>
+  );
+}
+
+export function ChamberStatusChip({ status }: ChamberStatusChipProps) {
+  return (
+    <GlassyStatusChip tone={status === "active" ? "ok" : "danger"}>
+      {status}
+    </GlassyStatusChip>
+  );
+}
+
+export function ChamberStatsTiles({
+  className,
+  stats,
+}: ChamberStatsTilesProps) {
+  return (
+    <GlassyCompactGrid className={cn("sm:grid-cols-2", className)}>
+      <GlassyCompactMetric label="Governors" value={stats.governors} />
+      <GlassyCompactMetric
+        label={<HintLabel termId="acm" prefix="Members'" termText="ACM" />}
+        value={stats.acm}
+      />
+      <GlassyCompactMetric
+        label={<HintLabel termId="lcm">LCM</HintLabel>}
+        value={stats.lcm}
+      />
+      <GlassyCompactMetric
+        label={<HintLabel termId="mcm">MCM</HintLabel>}
+        value={stats.mcm}
+      />
+    </GlassyCompactGrid>
+  );
+}
+
+export function ChamberPipelineTiles({
+  className,
+  pipeline,
+}: ChamberPipelineTilesProps) {
+  return (
+    <div className={cn("grid gap-2 sm:grid-cols-3", className)}>
+      {pipelineItems.map((item) => (
+        <GlassyTile
+          key={item.key}
+          className="flex min-h-[4.25rem] items-center justify-between gap-3 px-3 py-2"
+        >
+          <StageChip stage={item.stage} label={item.label} />
+          <span className="text-base font-semibold text-text">
+            {pipeline[item.key]}
+          </span>
+        </GlassyTile>
+      ))}
+    </div>
+  );
+}
+
+export function ChamberDirectoryCard({ chamber }: ChamberDirectoryCardProps) {
+  return (
+    <GlassyTile className="flex h-full flex-col gap-4 p-4">
+      <div className="flex min-w-0 items-start justify-between gap-3">
+        <div className="min-w-0">
+          <GlassyTileHeading className="text-[0.98rem]">
+            {chamber.name}
+          </GlassyTileHeading>
+          <p className="mt-1 mb-0 text-xs text-muted">
+            Chamber governance surface
+          </p>
+        </div>
+        <ChamberMultiplierChip multiplier={chamber.multiplier} />
+      </div>
+
+      <ChamberStatsTiles stats={chamber.stats} />
+
+      <div className="grid gap-2">
+        {pipelineItems.map((item) => (
+          <GlassyKeyValue
+            key={item.key}
+            className="glassy-key-value--metric min-h-[2.65rem] flex-row items-center justify-between gap-3"
+            label={<StageChip stage={item.stage} label={item.label} />}
+            value={chamber.pipeline[item.key]}
+          />
+        ))}
+      </div>
+
+      <div className="mt-auto flex justify-end">
+        <Button asChild size="sm">
+          <Link to={`/app/chambers/${chamber.id}`}>Enter chamber</Link>
+        </Button>
+      </div>
+    </GlassyTile>
+  );
+}
diff --git a/src/pages/cm/CMPanel.tsx b/src/pages/cm/CMPanel.tsx
index 5b61b60..971abe7 100644
--- a/src/pages/cm/CMPanel.tsx
+++ b/src/pages/cm/CMPanel.tsx
@@ -1,10 +1,5 @@
 import { useEffect, useState } from "react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Input } from "@/components/primitives/input";
 import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
@@ -12,6 +7,7 @@ import { HintLabel } from "@/components/Hint";
 import { Surface } from "@/components/Surface";
 import { PageHint } from "@/components/PageHint";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { SectionHeader } from "@/components/SectionHeader";
 import {
   apiChambers,
   apiChamberMultiplierSubmit,
@@ -33,7 +29,6 @@ const CMPanel: React.FC = () => {
   const [loadError, setLoadError] = useState<string | null>(null);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [submittingId, setSubmittingId] = useState<string | null>(null);
-  const [submittingAll, setSubmittingAll] = useState(false);
 
   useEffect(() => {
     let active = true;
@@ -139,16 +134,6 @@ const CMPanel: React.FC = () => {
     }
   };
 
-  const nonMemberSuggestions = (chambers ?? []).filter((c) => !c.member);
-  const handleSubmitAll = async () => {
-    if (!chambers || nonMemberSuggestions.length === 0) return;
-    setSubmittingAll(true);
-    for (const chamber of nonMemberSuggestions) {
-      await handleSubmit(chamber.id);
-    }
-    setSubmittingAll(false);
-  };
-
   return (
     <div className="flex flex-col gap-6">
       <PageHint pageId="cm-panel" />
@@ -172,7 +157,7 @@ const CMPanel: React.FC = () => {
       ) : null}
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle>Overview</CardTitle>
+          <SectionHeader>Overview</SectionHeader>
         </CardHeader>
         <CardContent className="text-sm text-muted">
           Set your <HintLabel termId="cognitocratic_measure">CM</HintLabel>{" "}
@@ -182,11 +167,9 @@ const CMPanel: React.FC = () => {
         </CardContent>
       </Card>
 
-      <Card>
-        <CardHeader className="pb-2">
-          <CardTitle>Multipliers</CardTitle>
-        </CardHeader>
-        <CardContent className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+      <section className="flex flex-col gap-3">
+        <SectionHeader>Multipliers</SectionHeader>
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
           {(chambers ?? []).map((chamber) => (
             <Surface
               key={chamber.id}
@@ -244,18 +227,8 @@ const CMPanel: React.FC = () => {
               </div>
             </Surface>
           ))}
-        </CardContent>
-      </Card>
-
-      <div className="flex justify-end">
-        <Button
-          size="sm"
-          disabled={nonMemberSuggestions.length === 0 || submittingAll}
-          onClick={handleSubmitAll}
-        >
-          {submittingAll ? "Submitting…" : "Submit suggestions"}
-        </Button>
-      </div>
+        </div>
+      </section>
     </div>
   );
 };
diff --git a/src/pages/courts/Courtroom.tsx b/src/pages/courts/Courtroom.tsx
index 6ea7937..a725104 100644
--- a/src/pages/courts/Courtroom.tsx
+++ b/src/pages/courts/Courtroom.tsx
@@ -8,6 +8,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router";
 import { Surface } from "@/components/Surface";
 import { PageHint } from "@/components/PageHint";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Kicker } from "@/components/Kicker";
 import { CourtStatusBadge } from "@/components/CourtStatusBadge";
 import { VoteButton } from "@/components/VoteButton";
@@ -200,7 +201,7 @@ const Courtroom: React.FC = () => {
 
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle>Verdict</CardTitle>
+          <SectionHeader>Verdict</SectionHeader>
         </CardHeader>
         <CardContent className="flex flex-col items-center gap-3">
           <div className="flex flex-wrap items-center justify-center gap-4">
@@ -271,7 +272,7 @@ const Courtroom: React.FC = () => {
       <div className="grid gap-4 lg:grid-cols-[1.55fr_1fr]">
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle>Proceedings</CardTitle>
+            <SectionHeader>Proceedings</SectionHeader>
           </CardHeader>
           <CardContent className="space-y-3 text-sm text-muted">
             <Surface
@@ -333,7 +334,7 @@ const Courtroom: React.FC = () => {
         <div className="flex flex-col gap-4">
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle>Parties</CardTitle>
+              <SectionHeader>Parties</SectionHeader>
             </CardHeader>
             <CardContent className="space-y-2">
               {parties.length > 0 ? (
@@ -375,7 +376,7 @@ const Courtroom: React.FC = () => {
 
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle>Jury</CardTitle>
+              <SectionHeader>Jury</SectionHeader>
             </CardHeader>
             <CardContent className="grid gap-2">
               {juryMembers.map((member) => (
diff --git a/src/pages/courts/Courts.tsx b/src/pages/courts/Courts.tsx
index ac65d48..70c1f82 100644
--- a/src/pages/courts/Courts.tsx
+++ b/src/pages/courts/Courts.tsx
@@ -1,16 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/primitives/button";
 import { SearchBar } from "@/components/SearchBar";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Link } from "react-router";
 import { MetricTile } from "@/components/MetricTile";
 import { CourtStatusBadge } from "@/components/CourtStatusBadge";
 import { PageHint } from "@/components/PageHint";
+import { SectionHeader } from "@/components/SectionHeader";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
 import { apiCourts } from "@/lib/apiClient";
 import { formatDateTime, toTimestampMs } from "@/lib/dateTime";
@@ -137,7 +133,7 @@ const Courts: React.FC = () => {
         ) : (
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle>Active courtrooms</CardTitle>
+              <SectionHeader>Active courtrooms</SectionHeader>
             </CardHeader>
             <CardContent className="space-y-3">
               {filtered.length === 0 ? (
diff --git a/src/pages/factions/FactionCreate.tsx b/src/pages/factions/FactionCreate.tsx
index fdf8881..275f3e1 100644
--- a/src/pages/factions/FactionCreate.tsx
+++ b/src/pages/factions/FactionCreate.tsx
@@ -2,13 +2,9 @@ import { useMemo, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router";
 
 import { Kicker } from "@/components/Kicker";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Input } from "@/components/primitives/input";
 import { Select } from "@/components/primitives/select";
 import { apiFactionCreate, getApiErrorPayload } from "@/lib/apiClient";
@@ -206,7 +202,7 @@ const FactionCreate: React.FC = () => {
         <CardHeader className="flex flex-row items-start justify-between gap-4">
           <div className="space-y-2">
             <Kicker>Phase 67</Kicker>
-            <CardTitle>Create faction</CardTitle>
+            <SectionHeader>Create faction</SectionHeader>
             <p className="text-sm text-muted">
               Factions coordinate members, initiatives, and discussion before
               formal governance actions.
diff --git a/src/pages/factions/Factions.tsx b/src/pages/factions/Factions.tsx
index 51fc446..da8f9b0 100644
--- a/src/pages/factions/Factions.tsx
+++ b/src/pages/factions/Factions.tsx
@@ -15,6 +15,7 @@ import { StatTile } from "@/components/StatTile";
 import { PageHint } from "@/components/PageHint";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
 import { apiFactions } from "@/lib/apiClient";
+import { factionSummaryPreview } from "@/lib/factionUi";
 import { formatLoadError } from "@/lib/errorFormatting";
 import type { FactionDto } from "@/types/api";
 
@@ -127,7 +128,9 @@ const Factions: React.FC = () => {
             <MetricTile label="Total factions" value={totals.totalFactions} />
             <MetricTile label="Members" value={totals.totalMembers} />
             <MetricTile
-              label={<HintLabel termId="acm" termText="ACM" />}
+              label={
+                <HintLabel termId="acm" prefix="Members'" termText="ACM" />
+              }
               value={totals.totalAcm}
             />
           </section>
@@ -151,7 +154,7 @@ const Factions: React.FC = () => {
                 label: "Sort by",
                 options: [
                   { value: "members", label: "Members (desc)" },
-                  { value: "acm", label: "ACM (desc)" },
+                  { value: "acm", label: "Members' ACM (desc)" },
                 ],
               },
             ]}
@@ -159,12 +162,9 @@ const Factions: React.FC = () => {
             onFiltersChange={setFilters}
           />
 
-          <section
-            className="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
-            aria-live="polite"
-          >
+          <section className="grid gap-5 lg:grid-cols-2" aria-live="polite">
             {filtered.length === 0 ? (
-              <Card className="border-dashed px-4 py-6 text-center text-sm text-muted md:col-span-2 xl:col-span-3">
+              <Card className="border-dashed px-4 py-6 text-center text-sm text-muted lg:col-span-2">
                 No factions match this filter set.
               </Card>
             ) : (
@@ -172,8 +172,8 @@ const Factions: React.FC = () => {
                 <Card key={faction.id} className="h-full">
                   <CardHeader className="pb-2">
                     <CardTitle>{faction.name}</CardTitle>
-                    <p className="line-clamp-2 min-h-10 text-sm text-muted">
-                      {faction.description}
+                    <p className="min-h-16 text-sm leading-relaxed text-muted">
+                      {factionSummaryPreview(faction.description)}
                     </p>
                   </CardHeader>
                   <CardContent className="space-y-3 text-sm text-text">
@@ -185,7 +185,13 @@ const Factions: React.FC = () => {
                         valueClassName="text-lg"
                       />
                       <StatTile
-                        label={<HintLabel termId="acm" termText="ACM" />}
+                        label={
+                          <HintLabel
+                            termId="acm"
+                            prefix="Members'"
+                            termText="ACM"
+                          />
+                        }
                         value={faction.acm}
                         className="px-2 py-2"
                         valueClassName="text-lg"
@@ -218,11 +224,15 @@ const Factions: React.FC = () => {
                   <p className="text-sm font-semibold text-text">
                     {faction.name}
                   </p>
-                  <p className="text-xs text-muted">{faction.description}</p>
+                  <p className="text-xs text-muted">
+                    {factionSummaryPreview(faction.description)}
+                  </p>
                 </div>
                 <div className="flex min-w-0 flex-wrap items-center gap-2 text-xs text-muted">
                   <Badge variant="outline">Members: {faction.members}</Badge>
-                  <Badge variant="outline">ACM: {faction.acm}</Badge>
+                  <Badge variant="outline">
+                    Members&apos; ACM: {faction.acm}
+                  </Badge>
                 </div>
                 <Button asChild size="sm">
                   <Link to={`/app/factions/${faction.id}`}>Open</Link>
diff --git a/src/pages/factions/components/FactionChannelsSection.tsx b/src/pages/factions/components/FactionChannelsSection.tsx
index 91f1185..36dd926 100644
--- a/src/pages/factions/components/FactionChannelsSection.tsx
+++ b/src/pages/factions/components/FactionChannelsSection.tsx
@@ -1,12 +1,8 @@
 import { Link } from "react-router";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Input } from "@/components/primitives/input";
 import { Select } from "@/components/primitives/select";
 import type { FactionDto } from "@/types/api";
@@ -41,7 +37,7 @@ export function FactionChannelsSection({
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle>Channels</CardTitle>
+        <SectionHeader>Channels</SectionHeader>
       </CardHeader>
       <CardContent className="space-y-3">
         {channels.length === 0 ? (
diff --git a/src/pages/factions/components/FactionEditCard.tsx b/src/pages/factions/components/FactionEditCard.tsx
index 14b2f1a..777da36 100644
--- a/src/pages/factions/components/FactionEditCard.tsx
+++ b/src/pages/factions/components/FactionEditCard.tsx
@@ -1,10 +1,6 @@
+import { SectionHeader } from "@/components/SectionHeader";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Input } from "@/components/primitives/input";
 import { Select } from "@/components/primitives/select";
 
@@ -46,7 +42,7 @@ export function FactionEditCard({
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle>Edit faction</CardTitle>
+        <SectionHeader>Edit faction</SectionHeader>
       </CardHeader>
       <CardContent className="space-y-3">
         <Input
diff --git a/src/pages/factions/components/FactionHero.tsx b/src/pages/factions/components/FactionHero.tsx
index 86fc41b..be32dc3 100644
--- a/src/pages/factions/components/FactionHero.tsx
+++ b/src/pages/factions/components/FactionHero.tsx
@@ -1,5 +1,6 @@
 import { Kicker } from "@/components/Kicker";
 import { StatTile } from "@/components/StatTile";
+import { HintLabel } from "@/components/Hint";
 import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
 import { Card, CardContent } from "@/components/primitives/card";
@@ -105,7 +106,11 @@ export const FactionHero: React.FC<FactionHeroProps> = ({
           value={String(faction.members)}
           align="center"
         />
-        <StatTile label="ACM" value={String(faction.acm)} align="center" />
+        <StatTile
+          label={<HintLabel termId="acm" prefix="Members'" termText="ACM" />}
+          value={String(faction.acm)}
+          align="center"
+        />
         <StatTile
           label="Role"
           value={
diff --git a/src/pages/factions/components/FactionInitiativeCreateCard.tsx b/src/pages/factions/components/FactionInitiativeCreateCard.tsx
index 26c56a3..cf8253e 100644
--- a/src/pages/factions/components/FactionInitiativeCreateCard.tsx
+++ b/src/pages/factions/components/FactionInitiativeCreateCard.tsx
@@ -1,12 +1,8 @@
 import { Link } from "react-router";
 
+import { SectionHeader } from "@/components/SectionHeader";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Input } from "@/components/primitives/input";
 import { formatLoadError } from "@/lib/errorFormatting";
 
@@ -40,7 +36,7 @@ export function FactionInitiativeCreateCard({
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle>Create initiative</CardTitle>
+        <SectionHeader>Create initiative</SectionHeader>
       </CardHeader>
       <CardContent className="space-y-3">
         {!canCreate ? (
diff --git a/src/pages/factions/components/FactionInitiativeListCard.tsx b/src/pages/factions/components/FactionInitiativeListCard.tsx
index ec75b92..14da44c 100644
--- a/src/pages/factions/components/FactionInitiativeListCard.tsx
+++ b/src/pages/factions/components/FactionInitiativeListCard.tsx
@@ -1,13 +1,9 @@
 import { Link } from "react-router";
 
+import { SectionHeader } from "@/components/SectionHeader";
 import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { formatDateTime } from "@/lib/dateTime";
 import type { FactionDto } from "@/types/api";
 
@@ -30,7 +26,7 @@ export function FactionInitiativeListCard({
     <Card>
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between gap-2">
-          <CardTitle>Initiative list</CardTitle>
+          <SectionHeader>Initiative list</SectionHeader>
           {canPost ? (
             <Button asChild size="sm">
               <Link to={`/app/factions/${factionId}/initiatives/new`}>
diff --git a/src/pages/factions/components/FactionInitiativesSection.tsx b/src/pages/factions/components/FactionInitiativesSection.tsx
index 86b0b8c..6e4dfca 100644
--- a/src/pages/factions/components/FactionInitiativesSection.tsx
+++ b/src/pages/factions/components/FactionInitiativesSection.tsx
@@ -1,13 +1,9 @@
 import { Link } from "react-router";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import type { FactionDto } from "@/types/api";
 
 type FactionInitiative = NonNullable<FactionDto["initiativesDetailed"]>[number];
@@ -24,7 +20,7 @@ export function FactionInitiativesSection({
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle>Initiatives</CardTitle>
+        <SectionHeader>Initiatives</SectionHeader>
       </CardHeader>
       <CardContent className="space-y-3">
         {initiatives.length === 0 ? (
diff --git a/src/pages/factions/components/FactionMembersSection.tsx b/src/pages/factions/components/FactionMembersSection.tsx
index f5650bf..88d4136 100644
--- a/src/pages/factions/components/FactionMembersSection.tsx
+++ b/src/pages/factions/components/FactionMembersSection.tsx
@@ -1,12 +1,8 @@
 import { AddressInline } from "@/components/AddressInline";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Badge } from "@/components/primitives/badge";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Select } from "@/components/primitives/select";
 import { addressesReferToSameIdentity } from "@/lib/addressIdentity";
 import { formatDateTime } from "@/lib/dateTime";
@@ -36,7 +32,7 @@ export function FactionMembersSection({
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle>Members</CardTitle>
+        <SectionHeader>Members</SectionHeader>
       </CardHeader>
       <CardContent className="space-y-2">
         {activeMemberships.length === 0 ? (
diff --git a/src/pages/factions/components/FactionModerationQueues.tsx b/src/pages/factions/components/FactionModerationQueues.tsx
index f01cfe4..11bbade 100644
--- a/src/pages/factions/components/FactionModerationQueues.tsx
+++ b/src/pages/factions/components/FactionModerationQueues.tsx
@@ -1,13 +1,9 @@
 import { AddressInline } from "@/components/AddressInline";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { formatDateTime } from "@/lib/dateTime";
 import type { FactionDto } from "@/types/api";
 
@@ -49,7 +45,7 @@ export function FactionModerationQueues({
     <>
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle>Cofounder invitations</CardTitle>
+          <SectionHeader>Cofounder invitations</SectionHeader>
         </CardHeader>
         <CardContent className="space-y-2">
           {cofounderInvitations.length === 0 ? (
@@ -93,7 +89,7 @@ export function FactionModerationQueues({
 
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle>Join requests</CardTitle>
+          <SectionHeader>Join requests</SectionHeader>
         </CardHeader>
         <CardContent className="space-y-2">
           {pendingJoinRequests.length === 0 ? (
diff --git a/src/pages/factions/components/FactionThreadCreateCard.tsx b/src/pages/factions/components/FactionThreadCreateCard.tsx
index cdb7868..eb01f9e 100644
--- a/src/pages/factions/components/FactionThreadCreateCard.tsx
+++ b/src/pages/factions/components/FactionThreadCreateCard.tsx
@@ -1,12 +1,8 @@
 import { Link } from "react-router";
 
+import { SectionHeader } from "@/components/SectionHeader";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Input } from "@/components/primitives/input";
 import { formatLoadError } from "@/lib/errorFormatting";
 
@@ -40,7 +36,7 @@ export function FactionThreadCreateCard({
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle>Create thread</CardTitle>
+        <SectionHeader>Create thread</SectionHeader>
       </CardHeader>
       <CardContent className="space-y-3">
         <p className="text-sm text-muted">
diff --git a/src/pages/factions/components/FactionThreadDetailCard.tsx b/src/pages/factions/components/FactionThreadDetailCard.tsx
index 01e6f4b..d08055c 100644
--- a/src/pages/factions/components/FactionThreadDetailCard.tsx
+++ b/src/pages/factions/components/FactionThreadDetailCard.tsx
@@ -1,11 +1,7 @@
 import { AddressInline } from "@/components/AddressInline";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { Input } from "@/components/primitives/input";
 import { Select } from "@/components/primitives/select";
 import { formatDateTime } from "@/lib/dateTime";
@@ -37,7 +33,7 @@ export function FactionThreadDetailCard({
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle>Thread</CardTitle>
+        <SectionHeader>Thread</SectionHeader>
       </CardHeader>
       <CardContent className="space-y-3">
         {!thread ? (
diff --git a/src/pages/factions/components/FactionThreadListCard.tsx b/src/pages/factions/components/FactionThreadListCard.tsx
index 68894e8..cc0f93e 100644
--- a/src/pages/factions/components/FactionThreadListCard.tsx
+++ b/src/pages/factions/components/FactionThreadListCard.tsx
@@ -1,12 +1,8 @@
 import { Link } from "react-router";
 
+import { SectionHeader } from "@/components/SectionHeader";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { formatDateTime } from "@/lib/dateTime";
 import type { FactionDto } from "@/types/api";
 
@@ -29,7 +25,7 @@ export function FactionThreadListCard({
     <Card>
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between gap-2">
-          <CardTitle>Threads</CardTitle>
+          <SectionHeader>Threads</SectionHeader>
           {canPost ? (
             <Button asChild size="sm">
               <Link
diff --git a/src/pages/feed/Feed.css b/src/pages/feed/Feed.css
new file mode 100644
index 0000000..615be9d
--- /dev/null
+++ b/src/pages/feed/Feed.css
@@ -0,0 +1,132 @@
+.feed-page {
+  --feed-control-bg: color-mix(in srgb, var(--panel), var(--primary) 4%);
+  --feed-control-active-bg: color-mix(in srgb, var(--primary), transparent 12%);
+  --feed-control-active-text: var(--primary-foreground);
+  --feed-context-text: color-mix(in srgb, var(--muted), var(--primary) 18%);
+  --feed-legend-bg: color-mix(in srgb, var(--panel), var(--primary) 3%);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1.4rem;
+}
+
+:root[data-theme="light"] .feed-page {
+  --feed-control-bg: #ffffff;
+  --feed-control-active-bg: #6fa8ff;
+  --feed-control-active-text: #ffffff;
+  --feed-context-text: #5d6475;
+  --feed-legend-bg: rgba(255, 255, 255, 0.78);
+}
+
+:root[data-theme="night"] .feed-page {
+  --feed-control-bg: #05070c;
+  --feed-control-active-bg: rgba(111, 168, 255, 0.32);
+  --feed-control-active-text: #f5f5f5;
+  --feed-context-text: #a9b8d4;
+  --feed-legend-bg: rgba(6, 9, 14, 0.72);
+}
+
+:root[data-theme="fire"] .feed-page {
+  --feed-control-bg: rgba(29, 8, 2, 0.78);
+  --feed-control-active-bg: rgba(255, 104, 0, 0.52);
+  --feed-control-active-text: #fff7ed;
+  --feed-context-text: #f0bd8d;
+  --feed-legend-bg: rgba(29, 8, 2, 0.72);
+}
+
+.feed-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.9rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 1rem;
+}
+
+.feed-controls > div {
+  border-radius: 8px;
+  background: var(--feed-control-bg);
+}
+
+.feed-controls button {
+  border-radius: 8px;
+}
+
+.feed-controls button[aria-pressed="true"] {
+  background: var(--feed-control-active-bg);
+  color: var(--feed-control-active-text);
+}
+
+.feed-controls__legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.6rem 0.9rem;
+  border: 1px solid var(--surface-glass-border);
+  border-radius: 8px;
+  background: var(--feed-legend-bg);
+  padding: 0.48rem 0.65rem;
+  box-shadow: var(--shadow-control);
+}
+
+.feed-controls__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.38rem;
+  color: var(--feed-context-text);
+  font-size: 0.78rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.feed-controls__legend-swatch {
+  width: 0.45rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor, transparent 74%);
+}
+
+.feed-controls__legend-swatch--action {
+  background: var(--record-rail-action);
+}
+
+.feed-controls__legend-swatch--recent {
+  background: var(--record-rail-recent);
+}
+
+.feed-controls__legend-swatch--idle {
+  background: var(--record-rail-idle);
+}
+
+.feed-page__status {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.feed-page__status--error {
+  color: var(--destructive);
+}
+
+.feed-stream {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+@media (max-width: 760px) {
+  .feed-controls {
+    align-items: stretch;
+  }
+
+  .feed-controls > div {
+    width: 100%;
+  }
+
+  .feed-controls__legend {
+    justify-content: flex-start;
+  }
+}
diff --git a/src/pages/feed/Feed.tsx b/src/pages/feed/Feed.tsx
index 61d1ac5..a53a391 100644
--- a/src/pages/feed/Feed.tsx
+++ b/src/pages/feed/Feed.tsx
@@ -15,6 +15,7 @@ import { useFeedChamberFilters } from "./hooks/useFeedChamberFilters";
 import { useFeedDetailPages } from "./hooks/useFeedDetailPages";
 import { useFeedItems } from "./hooks/useFeedItems";
 import { useFeedPageSize } from "./hooks/useFeedPageSize";
+import "./Feed.css";
 
 const Feed: React.FC = () => {
   const auth = useAuth();
@@ -104,16 +105,10 @@ const Feed: React.FC = () => {
   }, [handleLoadMore, nextCursor]);
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="feed-page">
       <PageHint pageId="feed" />
-      {/* Governing threshold moved to MyGovernance */}
 
-      <FeedControls
-        chamberCount={(chamberFilters ?? []).length}
-        chambersLoading={chambersLoading}
-        feedScope={feedScope}
-        onFeedScopeChange={setFeedScope}
-      />
+      <FeedControls feedScope={feedScope} onFeedScopeChange={setFeedScope} />
 
       <FeedStatusMessages feedItems={feedItems} loadError={loadError} />
 
diff --git a/src/pages/feed/components/FeedControls.tsx b/src/pages/feed/components/FeedControls.tsx
index b877168..d02a5c3 100644
--- a/src/pages/feed/components/FeedControls.tsx
+++ b/src/pages/feed/components/FeedControls.tsx
@@ -10,22 +10,16 @@ const FEED_SCOPES: { value: FeedScope; label: string }[] = [
 ];
 
 type FeedControlsProps = {
-  chamberCount: number;
-  chambersLoading: boolean;
   feedScope: FeedScope;
   onFeedScopeChange: (scope: FeedScope) => void;
 };
 
 export function FeedControls({
-  chamberCount,
-  chambersLoading,
   feedScope,
   onFeedScopeChange,
 }: FeedControlsProps) {
-  const chamberScoped = feedScope === "chambers" || feedScope === "urgent";
-
   return (
-    <div className="flex flex-wrap items-center justify-between gap-3">
+    <div className="feed-controls">
       <ToggleGroup
         value={feedScope}
         onValueChange={(value) => onFeedScopeChange(value as FeedScope)}
@@ -34,13 +28,20 @@ export function FeedControls({
           label: scope.label,
         }))}
       />
-      {chamberScoped && chambersLoading ? (
-        <span className="text-xs text-muted">Loading chambers…</span>
-      ) : chamberScoped ? (
-        <span className="text-xs text-muted">
-          {chamberCount} chamber{chamberCount === 1 ? "" : "s"}
+      <div className="feed-controls__legend" aria-label="Feed indicator legend">
+        <span className="feed-controls__legend-item">
+          <span className="feed-controls__legend-swatch feed-controls__legend-swatch--action" />
+          Action / open
+        </span>
+        <span className="feed-controls__legend-item">
+          <span className="feed-controls__legend-swatch feed-controls__legend-swatch--recent" />
+          Recent
+        </span>
+        <span className="feed-controls__legend-item">
+          <span className="feed-controls__legend-swatch feed-controls__legend-swatch--idle" />
+          Standard
         </span>
-      ) : null}
+      </div>
     </div>
   );
 }
diff --git a/src/pages/feed/components/FeedExpandedContent.tsx b/src/pages/feed/components/FeedExpandedContent.tsx
index b8b61d9..181094f 100644
--- a/src/pages/feed/components/FeedExpandedContent.tsx
+++ b/src/pages/feed/components/FeedExpandedContent.tsx
@@ -56,17 +56,12 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
 }) => {
   return (
     <section className="space-y-5">
-      <div className="space-y-2">
-        <p className="text-sm font-semibold text-text">Summary</p>
-        <p className="text-sm text-muted">{item.summary}</p>
-      </div>
-
       {finishedPage ? (
         <div className="space-y-3">
           <p className="text-sm font-semibold text-text">Outcome status</p>
 
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="px-5 py-4 text-sm text-muted"
@@ -87,7 +82,7 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
         </div>
       ) : hasFinishedRoute(item.href) ? (
         <Surface
-          variant="panelAlt"
+          variant="glass"
           radius="2xl"
           shadow="tile"
           className="px-5 py-4 text-sm text-muted"
@@ -99,7 +94,7 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
           <p className="text-sm font-semibold text-text">Quorum of attention</p>
 
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="flex flex-wrap items-center justify-center gap-4 px-6 py-5 text-lg font-semibold"
@@ -135,7 +130,7 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
           <p className="text-sm font-semibold text-text">Vote snapshot</p>
 
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="space-y-3 px-5 py-4"
@@ -205,7 +200,7 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
             Citizen veto snapshot
           </p>
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="space-y-2 px-5 py-4"
@@ -236,7 +231,7 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
             Chamber veto snapshot
           </p>
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="space-y-2 px-5 py-4"
@@ -266,7 +261,7 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
           <p className="text-sm font-semibold text-text">Execution snapshot</p>
 
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="space-y-3 px-5 py-4"
@@ -316,7 +311,7 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
           <p className="text-sm font-semibold text-text">Courts status</p>
 
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="space-y-2 px-5 py-4"
@@ -336,7 +331,7 @@ export const FeedExpandedContent: React.FC<FeedExpandedContentProps> = ({
           <p className="text-sm font-semibold text-text">Thread snapshot</p>
 
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="space-y-2 px-5 py-4"
diff --git a/src/pages/feed/components/FeedListSection.tsx b/src/pages/feed/components/FeedListSection.tsx
index 92e389f..ac4d864 100644
--- a/src/pages/feed/components/FeedListSection.tsx
+++ b/src/pages/feed/components/FeedListSection.tsx
@@ -1,8 +1,6 @@
 import type { RefObject } from "react";
 
-import { cn } from "@/lib/utils";
-import { ExpandableCard } from "@/components/ExpandableCard";
-import { StageChip } from "@/components/StageChip";
+import { GlassyRecordCard } from "@/components/GlassyRecordCard";
 import { formatDateTime } from "@/lib/dateTime";
 import {
   feedItemKey,
@@ -66,7 +64,8 @@ export function FeedListSection({
     <section
       ref={feedListRef}
       aria-live="polite"
-      className="flex flex-col gap-4"
+      className="feed-stream"
+      aria-label="Governance feed records"
     >
       {sortedFeed.map((item, index) => {
         const itemKey = feedItemKey(item);
@@ -107,23 +106,25 @@ export function FeedListSection({
           chamberVetoPage?.stats ??
           item.stats ??
           [];
+        const expanded = expandedKey === itemKey;
+        const rail =
+          expanded || item.actionable
+            ? "action"
+            : index < 3
+              ? "recent"
+              : "idle";
 
         return (
-          <ExpandableCard
+          <GlassyRecordCard
             key={itemKey}
-            expanded={expandedKey === itemKey}
+            expanded={expanded}
             onToggle={() => onToggle(itemKey)}
-            className={cn(index < 3 ? "border-primary" : "border-border")}
+            rail={rail}
             meta={item.meta}
+            stage={item.stage}
             title={item.title}
-            right={
-              <>
-                <span className="text-xs text-muted">
-                  {formatDateTime(item.timestamp)}
-                </span>
-                <StageChip stage={item.stage} />
-              </>
-            }
+            summary={item.summary}
+            dateText={formatDateTime(item.timestamp)}
           >
             <FeedExpandedContent
               chamberPage={chamberPage}
@@ -141,7 +142,7 @@ export function FeedListSection({
               poolPage={poolPage}
               poolStats={poolStats}
             />
-          </ExpandableCard>
+          </GlassyRecordCard>
         );
       })}
     </section>
diff --git a/src/pages/feed/components/FeedStatusMessages.tsx b/src/pages/feed/components/FeedStatusMessages.tsx
index e368ab5..9abebf0 100644
--- a/src/pages/feed/components/FeedStatusMessages.tsx
+++ b/src/pages/feed/components/FeedStatusMessages.tsx
@@ -1,5 +1,4 @@
 import { NoDataYetBar } from "@/components/NoDataYetBar";
-import { Surface } from "@/components/Surface";
 import { formatLoadError } from "@/lib/errorFormatting";
 import type { FeedItemDto } from "@/types/api";
 
@@ -15,24 +14,14 @@ export function FeedStatusMessages({
   return (
     <>
       {feedItems === null ? (
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className="px-5 py-4 text-sm text-muted"
-        >
+        <p role="status" className="feed-page__status">
           Loading feed…
-        </Surface>
+        </p>
       ) : null}
       {loadError ? (
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className="px-5 py-4 text-sm text-destructive"
-        >
+        <p role="alert" className="feed-page__status feed-page__status--error">
           Feed unavailable: {formatLoadError(loadError)}
-        </Surface>
+        </p>
       ) : null}
 
       {feedItems !== null && feedItems.length === 0 && !loadError ? (
diff --git a/src/pages/formation/Formation.css b/src/pages/formation/Formation.css
new file mode 100644
index 0000000..489d24b
--- /dev/null
+++ b/src/pages/formation/Formation.css
@@ -0,0 +1,204 @@
+.formation-project-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
+  align-items: stretch;
+}
+
+.formation-project-grid--pair {
+  grid-template-columns: repeat(2, minmax(min(100%, 23rem), 1fr));
+}
+
+.formation-project-card {
+  --formation-status: color-mix(in srgb, var(--border), var(--primary) 20%);
+
+  position: relative;
+  display: grid;
+  min-height: 25.25rem;
+  height: 100%;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 0.95rem;
+  overflow: hidden;
+  padding: 1.05rem 1.05rem 1.05rem 1.35rem;
+}
+
+.formation-project-card::before {
+  content: "";
+  position: absolute;
+  top: 1.2rem;
+  bottom: 1.2rem;
+  left: 0;
+  width: 2px;
+  background: var(--formation-status);
+}
+
+.formation-project-card--ongoing {
+  --formation-status: var(--accent);
+}
+
+.formation-project-card--gathering {
+  --formation-status: var(--accent-warm);
+}
+
+.formation-project-card--ended {
+  --formation-status: color-mix(in srgb, var(--muted), var(--primary) 16%);
+}
+
+.formation-project-card__header,
+.formation-project-card__body,
+.formation-project-card__copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.formation-project-card__header {
+  min-height: 5.85rem;
+  gap: 0.45rem;
+  padding-right: 8.65rem;
+}
+
+.formation-project-card__body {
+  flex: 1;
+  gap: 0.95rem;
+  justify-content: space-between;
+}
+
+.formation-project-card__stage {
+  position: absolute;
+  top: 1.05rem;
+  right: 1.05rem;
+  width: 7.75rem;
+  border: 1px solid var(--formation-status);
+  background: var(--formation-status);
+  color: var(--primary-foreground);
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.formation-project-card__copy {
+  gap: 0.35rem;
+}
+
+.formation-project-card__title,
+.formation-project-card__summary {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.formation-project-card__title {
+  color: var(--text);
+  font-size: 1.08rem;
+  font-weight: 720;
+  line-height: 1.22;
+  min-height: 2.65rem;
+  max-height: calc(1.22em * 2);
+  overflow: hidden;
+}
+
+.formation-project-card__summary {
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.48;
+  min-height: calc(1.48em * 3);
+  max-height: calc(1.48em * 3);
+  overflow: hidden;
+}
+
+.formation-project-card__facts {
+  display: grid;
+  gap: 0.65rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.formation-project-card__fact {
+  min-width: 0;
+  min-height: 4.55rem;
+  padding: 0.68rem 0.72rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.formation-project-card__fact--chamber .formation-project-card__factValue {
+  color: color-mix(in srgb, var(--text), var(--primary) 10%);
+}
+
+.formation-project-card__factValue {
+  font-size: 0.9rem;
+  line-height: 1.25;
+  max-height: calc(1.25em * 2);
+  overflow: hidden;
+}
+
+.formation-project-card__footer {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.85rem;
+  align-items: center;
+  min-height: 3.15rem;
+  border-top: 1px solid color-mix(in srgb, var(--border), transparent 46%);
+  padding-top: 0.9rem;
+}
+
+.formation-project-card__proposer,
+.formation-project-card__actions {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.62rem;
+}
+
+.formation-project-card__actions {
+  justify-content: flex-end;
+}
+
+.formation-project-card__actions > a {
+  width: 7.75rem;
+}
+
+.formation-project-card__label {
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 650;
+  line-height: 1.1;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+@media (max-width: 760px) {
+  .formation-project-grid--pair {
+    grid-template-columns: 1fr;
+  }
+
+  .formation-project-card {
+    min-height: 25rem;
+  }
+
+  .formation-project-card__header {
+    padding-right: 0;
+    padding-top: 2.45rem;
+  }
+
+  .formation-project-card__footer {
+    grid-template-columns: 1fr;
+    min-height: 5.75rem;
+  }
+
+  .formation-project-card__proposer,
+  .formation-project-card__actions {
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+@media (max-width: 460px) {
+  .formation-project-card__facts {
+    grid-template-columns: 1fr;
+  }
+
+  .formation-project-card {
+    min-height: 31rem;
+  }
+}
diff --git a/src/pages/formation/Formation.tsx b/src/pages/formation/Formation.tsx
index aeaf9d1..5978f8a 100644
--- a/src/pages/formation/Formation.tsx
+++ b/src/pages/formation/Formation.tsx
@@ -1,30 +1,48 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { Button } from "@/components/primitives/button";
-import { Card, CardContent, CardHeader } from "@/components/primitives/card";
-import { Badge } from "@/components/primitives/badge";
-import { Link } from "react-router";
+import type { ReactNode } from "react";
+
 import { SearchBar } from "@/components/SearchBar";
 import { MetricTile } from "@/components/MetricTile";
 import { Surface } from "@/components/Surface";
 import { PageHint } from "@/components/PageHint";
-import { Kicker } from "@/components/Kicker";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
-import { AddressInline } from "@/components/AddressInline";
 import { apiFormation } from "@/lib/apiClient";
 import { formatLoadError } from "@/lib/errorFormatting";
+import { cn } from "@/lib/utils";
 import type {
   FormationCategoryDto as Category,
   FormationProjectDto,
   FormationStageDto as Stage,
   GetFormationResponse,
 } from "@/types/api";
+import {
+  FormationProjectCard,
+  formationProjectCardFromDto,
+} from "./components/FormationProjectCard";
 
-const stageLabel: Record<Stage, string> = {
-  live: "Live",
-  gathering: "Gathering team",
-  completed: "Completed",
-};
+function FormationLoadingMessage({
+  children,
+  tone = "neutral",
+}: {
+  children: ReactNode;
+  tone?: "danger" | "neutral";
+}) {
+  return (
+    <Surface
+      borderStyle="dashed"
+      className={cn(
+        "px-4 py-6 text-center text-sm",
+        tone === "danger" ? "text-destructive" : "text-muted",
+      )}
+      radius="2xl"
+      shadow="tile"
+      variant="glass"
+    >
+      {children}
+    </Surface>
+  );
+}
 
 const Formation: React.FC = () => {
   const [data, setData] = useState<GetFormationResponse | null>(null);
@@ -64,7 +82,10 @@ const Formation: React.FC = () => {
         project.title.toLowerCase().includes(term) ||
         project.proposer.toLowerCase().includes(term) ||
         project.summary.toLowerCase().includes(term) ||
-        project.focus.toLowerCase().includes(term);
+        project.focus.toLowerCase().includes(term) ||
+        (project.chamberTitle ?? project.chamber ?? "")
+          .toLowerCase()
+          .includes(term);
       const matchesStage =
         stageFilter === "any" ? true : project.stage === stageFilter;
       const matchesCategory =
@@ -74,17 +95,15 @@ const Formation: React.FC = () => {
   }, [projects, search, stageFilter, categoryFilter]);
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="formation-page flex flex-col gap-6">
       <PageHint pageId="formation" />
       {data === null ? (
-        <Card className="border-dashed px-4 py-6 text-center text-sm text-muted">
-          Loading Formation…
-        </Card>
+        <FormationLoadingMessage>Loading Formation…</FormationLoadingMessage>
       ) : null}
       {loadError ? (
-        <Card className="border-dashed px-4 py-6 text-center text-sm text-destructive">
+        <FormationLoadingMessage tone="danger">
           Formation unavailable: {formatLoadError(loadError)}
-        </Card>
+        </FormationLoadingMessage>
       ) : null}
       {data !== null && projects.length === 0 && !loadError ? (
         <NoDataYetBar label="Formation projects" />
@@ -141,84 +160,20 @@ const Formation: React.FC = () => {
 
       <section
         aria-live="polite"
-        className="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
+        className="formation-project-grid"
         data-formation-list={filteredProjects.length}
       >
         {filteredProjects.map((project) => (
-          <Card key={project.id}>
-            <CardHeader className="flex items-center justify-between pb-2">
-              <div>
-                <Kicker>{project.focus}</Kicker>
-                <h3 className="text-lg font-semibold text-text">
-                  {project.title}
-                </h3>
-              </div>
-              <Badge variant="outline" className="text-xs font-semibold">
-                {stageLabel[project.stage]}
-              </Badge>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <p className="text-sm text-text">{project.summary}</p>
-              <div className="grid gap-2 text-sm text-text">
-                <Surface
-                  variant="panelAlt"
-                  radius="xl"
-                  shadow="control"
-                  className="px-3 py-2"
-                >
-                  <Kicker>Budget</Kicker>
-                  <p className="font-semibold">{project.budget}</p>
-                </Surface>
-                <Surface
-                  variant="panelAlt"
-                  radius="xl"
-                  shadow="control"
-                  className="px-3 py-2"
-                >
-                  <Kicker>Milestones</Kicker>
-                  <p className="font-semibold">{project.milestones}</p>
-                </Surface>
-                <Surface
-                  variant="panelAlt"
-                  radius="xl"
-                  shadow="control"
-                  className="px-3 py-2"
-                >
-                  <Kicker>Team slots</Kicker>
-                  <p className="font-semibold">{project.teamSlots}</p>
-                </Surface>
-              </div>
-              <div className="flex items-center justify-between gap-3 text-sm text-muted">
-                <span className="inline-flex min-w-0 items-center gap-2">
-                  <span>Proposer:</span>
-                  <AddressInline
-                    address={project.proposer}
-                    className="min-w-0"
-                    textClassName="text-sm font-semibold text-text"
-                  />
-                </span>
-                <Button asChild size="sm">
-                  <Link
-                    to={
-                      project.stage === "completed"
-                        ? `/app/proposals/${project.id ?? "project"}/finished`
-                        : `/app/proposals/${project.id ?? "project"}/formation`
-                    }
-                  >
-                    {project.stage === "completed"
-                      ? "Open finished"
-                      : "Open project"}
-                  </Link>
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
+          <FormationProjectCard
+            key={project.id}
+            project={formationProjectCardFromDto(project)}
+          />
         ))}
         {projects.length > 0 && filteredProjects.length === 0 && (
           <Surface
             variant="panel"
             borderStyle="dashed"
-            className="px-4 py-8 text-center text-sm text-muted md:col-span-2 xl:col-span-3"
+            className="px-4 py-8 text-center text-sm text-muted"
           >
             No Formation projects match the current filters.
           </Surface>
diff --git a/src/pages/formation/components/FormationProjectCard.tsx b/src/pages/formation/components/FormationProjectCard.tsx
new file mode 100644
index 0000000..9fcb57e
--- /dev/null
+++ b/src/pages/formation/components/FormationProjectCard.tsx
@@ -0,0 +1,255 @@
+import { Link } from "react-router";
+
+import { AddressInline } from "@/components/AddressInline";
+import { Chip } from "@/components/Chip";
+import { Button } from "@/components/primitives/button";
+import { Badge } from "@/components/primitives/badge";
+import { StatTile } from "@/components/StatTile";
+import { Surface } from "@/components/Surface";
+import { proposalSummaryPreview } from "@/lib/textPreview";
+import { cn } from "@/lib/utils";
+import type { FormationProjectDto, FormationStageDto } from "@/types/api";
+import "../Formation.css";
+
+type FormationProjectCardFact = {
+  label: string;
+  value: string;
+  highlight?: boolean;
+};
+
+type FormationProjectCardAction = {
+  href: string;
+  label: string;
+};
+
+type FormationProjectCardViewModel = {
+  action?: FormationProjectCardAction;
+  facts?: FormationProjectCardFact[];
+  footerLabel?: string;
+  footerValue?: string;
+  id?: string;
+  stage: FormationStageDto;
+  statusLabel?: string;
+  summary: string;
+  tags?: string[];
+  title: string;
+};
+
+type FormationProjectCardProps = {
+  className?: string;
+  project: FormationProjectCardViewModel;
+};
+
+const stageLabel: Record<FormationStageDto, string> = {
+  live: "Ongoing",
+  gathering: "Gathering team",
+  completed: "Ended",
+};
+
+const stageVisual: Record<FormationStageDto, { railClass: string }> = {
+  live: { railClass: "formation-project-card--ongoing" },
+  gathering: { railClass: "formation-project-card--gathering" },
+  completed: { railClass: "formation-project-card--ended" },
+};
+
+function compactFormationMetric(value: string) {
+  return value
+    .replace(/\s+completed\b/gi, "")
+    .replace(/\s+locked\b/gi, "")
+    .replace(/\s+open\b/gi, "");
+}
+
+function formationHref(project: FormationProjectDto) {
+  return project.stage === "completed"
+    ? `/app/proposals/${project.id ?? "project"}/finished`
+    : `/app/proposals/${project.id ?? "project"}/formation`;
+}
+
+export function formationProjectCardFromDto(
+  project: FormationProjectDto,
+): FormationProjectCardViewModel {
+  const chamberLabel = project.chamberTitle ?? project.chamber ?? "Unassigned";
+  return {
+    action: {
+      href: formationHref(project),
+      label: project.stage === "completed" ? "Open finished" : "Open project",
+    },
+    facts: [
+      { label: "Chamber", value: chamberLabel, highlight: true },
+      { label: "Budget", value: project.budget },
+      {
+        label: "Milestones",
+        value: compactFormationMetric(project.milestones),
+      },
+      { label: "Team slots", value: compactFormationMetric(project.teamSlots) },
+    ],
+    footerLabel: "Proposer",
+    footerValue: project.proposer,
+    id: project.id,
+    stage: project.stage,
+    summary: project.summary,
+    title: project.title,
+  };
+}
+
+function stageFromProjectStatus(status: string): FormationStageDto {
+  const normalized = status.trim().toLowerCase();
+  if (normalized.includes("gather")) return "gathering";
+  if (
+    normalized.includes("end") ||
+    normalized.includes("complete") ||
+    normalized.includes("finish")
+  ) {
+    return "completed";
+  }
+  return "live";
+}
+
+export function formationProjectCardFromProfileProject(project: {
+  budget?: string;
+  chamber?: string;
+  chamberTitle?: string;
+  chips: string[];
+  id?: string;
+  milestones?: string;
+  proposer?: string;
+  stage?: FormationStageDto;
+  status: string;
+  summary: string;
+  teamSlots?: string;
+  title: string;
+}): FormationProjectCardViewModel {
+  if (
+    project.id &&
+    project.stage &&
+    project.proposer &&
+    project.budget &&
+    project.milestones &&
+    project.teamSlots
+  ) {
+    return formationProjectCardFromDto({
+      budget: project.budget,
+      category: "research",
+      chamber: project.chamber,
+      chamberTitle: project.chamberTitle,
+      focus: project.chips[0] ?? "Formation",
+      id: project.id,
+      milestones: project.milestones,
+      proposer: project.proposer,
+      stage: project.stage,
+      summary: project.summary,
+      teamSlots: project.teamSlots,
+      title: project.title,
+    });
+  }
+
+  return {
+    facts: [
+      {
+        label: "Chamber",
+        value: project.chamberTitle ?? "Unassigned",
+        highlight: true,
+      },
+      { label: "Budget", value: project.budget ?? "—" },
+      {
+        label: "Milestones",
+        value: compactFormationMetric(project.milestones ?? "—"),
+      },
+      {
+        label: "Team slots",
+        value: compactFormationMetric(project.teamSlots ?? "—"),
+      },
+    ],
+    footerLabel: project.proposer ? "Proposer" : undefined,
+    footerValue: project.proposer,
+    id: project.id,
+    stage: stageFromProjectStatus(project.status),
+    summary: project.summary,
+    title: project.title,
+  };
+}
+
+export function FormationProjectCard({
+  className,
+  project,
+}: FormationProjectCardProps) {
+  const visual = stageVisual[project.stage];
+  const facts = project.facts ?? [];
+  const statusLabel = project.statusLabel ?? stageLabel[project.stage];
+
+  return (
+    <Surface
+      as="article"
+      variant="glass"
+      radius="2xl"
+      shadow="card"
+      className={cn("formation-project-card", visual.railClass, className)}
+    >
+      <Chip className="formation-project-card__stage">{statusLabel}</Chip>
+      <div className="formation-project-card__header">
+        <div className="formation-project-card__copy">
+          <h3 className="formation-project-card__title">{project.title}</h3>
+          <p className="formation-project-card__summary">
+            {proposalSummaryPreview(project.summary)}
+          </p>
+        </div>
+      </div>
+
+      <div className="formation-project-card__body">
+        <div className="formation-project-card__facts">
+          {facts.map((fact) => (
+            <StatTile
+              key={fact.label}
+              align="left"
+              className={cn(
+                "formation-project-card__fact",
+                fact.highlight && "formation-project-card__fact--chamber",
+              )}
+              label={fact.label}
+              value={fact.value}
+              valueClassName="formation-project-card__factValue"
+            />
+          ))}
+        </div>
+
+        {project.tags?.length ? (
+          <div className="formation-project-card__tags">
+            {project.tags.map((tag) => (
+              <Badge key={tag} size="sm" variant="outline">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        ) : null}
+
+        {project.footerValue || project.action ? (
+          <div className="formation-project-card__footer">
+            {project.footerValue ? (
+              <div className="formation-project-card__proposer">
+                {project.footerLabel ? (
+                  <span className="formation-project-card__label">
+                    {project.footerLabel}
+                  </span>
+                ) : null}
+                <AddressInline
+                  address={project.footerValue}
+                  className="min-w-0"
+                  textClassName="text-sm font-semibold text-text"
+                />
+              </div>
+            ) : (
+              <span />
+            )}
+            {project.action ? (
+              <div className="formation-project-card__actions">
+                <Button asChild size="compact">
+                  <Link to={project.action.href}>{project.action.label}</Link>
+                </Button>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </Surface>
+  );
+}
diff --git a/src/pages/human-nodes/FullHistory.tsx b/src/pages/human-nodes/FullHistory.tsx
index 5052edf..3d8b06a 100644
--- a/src/pages/human-nodes/FullHistory.tsx
+++ b/src/pages/human-nodes/FullHistory.tsx
@@ -1,11 +1,7 @@
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardHeader } from "@/components/primitives/card";
 import { PageHint } from "@/components/PageHint";
 import { PageHeader } from "@/components/PageHeader";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Kicker } from "@/components/Kicker";
 import { Link, useParams } from "react-router";
 import { useEffect, useState } from "react";
@@ -81,7 +77,7 @@ const FullHistory: React.FC = () => {
       <Card>
         <CardHeader className="pb-2">
           <div className="flex items-center justify-between">
-            <CardTitle>All actions</CardTitle>
+            <SectionHeader>All actions</SectionHeader>
             <ButtonLink to={`/app/human-nodes/${id ?? ""}`}>
               Back to profile
             </ButtonLink>
diff --git a/src/pages/human-nodes/HumanNode.tsx b/src/pages/human-nodes/HumanNode.tsx
index 5e6c7b0..860014c 100644
--- a/src/pages/human-nodes/HumanNode.tsx
+++ b/src/pages/human-nodes/HumanNode.tsx
@@ -7,6 +7,7 @@ import { addressesReferToSameIdentity } from "@/lib/addressIdentity";
 import { formatLoadError } from "@/lib/errorFormatting";
 import type { ProofKeyDto } from "@/types/api";
 import { useAuth } from "@/app/auth/AuthContext";
+import { buildTierRequirementItems } from "@/lib/tierProgress";
 import {
   PROOF_META,
   type ActivityFilter,
@@ -23,12 +24,16 @@ import {
   getHumanNodeVisibleHeroStats,
   shouldShowHumanNodeShortBadge,
 } from "@/lib/humanNodesUi";
-import { HumanNodeActivityProjectsSection } from "./components/HumanNodeActivityProjectsSection";
 import { HumanNodeDelegationSection } from "./components/HumanNodeDelegationSection";
 import { HumanNodeDetailsProofsSection } from "./components/HumanNodeDetailsProofsSection";
 import { HumanNodeHero } from "./components/HumanNodeHero";
 import { useHumanNodeDelegationActions } from "./hooks/useHumanNodeDelegationActions";
 import { useHumanNodePageData } from "./hooks/useHumanNodePageData";
+import {
+  ProfileFormationProjectsSection,
+  ProfileGovernanceActivitySection,
+} from "@/pages/profile/components/ProfileActivityProjectsSection";
+import { ProfileTierProgressSection } from "@/pages/profile/components/ProfileTierProgressSection";
 
 const HumanNode: React.FC = () => {
   const auth = useAuth();
@@ -88,11 +93,14 @@ const HumanNode: React.FC = () => {
     proofSections,
     governanceActions,
     projects,
+    tierProgress,
     cmHistory = [],
     cmChambers = [],
   } = profile;
   const headerTitle = getHumanNodeHeaderTitle(profile);
-  const visibleHeroStats = getHumanNodeVisibleHeroStats(heroStats ?? []);
+  const visibleHeroStats = getHumanNodeVisibleHeroStats(heroStats ?? []).filter(
+    (stat) => stat.label.trim().toUpperCase() !== "ACM",
+  );
   const proofKeys: ProofKeyDto[] = ["time", "devotion", "governance"];
   const proofCards = proofKeys
     .map((key) => ({
@@ -123,6 +131,7 @@ const HumanNode: React.FC = () => {
   const filteredActions = governanceActions.filter((action) =>
     activityMatches(action, activityFilter),
   );
+  const requirementItems = buildTierRequirementItems(tierProgress ?? null);
   const visibleDetails = quickDetails.filter((detail) =>
     shouldShowDetail(detail.label),
   );
@@ -165,32 +174,52 @@ const HumanNode: React.FC = () => {
         visibleDetails={visibleDetails}
       />
 
-      <CmEconomyPanel
-        totals={cmTotals}
-        chambers={cmChambers}
-        history={cmHistory}
-        mmValue="—"
-      />
+      <div className="grid items-stretch gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(22rem,1fr)]">
+        <ProfileFormationProjectsSection
+          className="h-full"
+          projects={projects}
+        />
 
-      <HumanNodeDelegationSection
-        delegationCards={delegationCards}
-        delegationErrorByChamber={delegationErrorByChamber}
-        delegationPendingByChamber={delegationPendingByChamber}
-        isSelfProfile={isSelfProfile}
-        manageableChambers={manageableChambers}
-        onClearDelegation={(chamberId) => void handleClearDelegation(chamberId)}
-        onDelegateHere={(chamberId) => void handleDelegateHere(chamberId)}
-        profileId={profile.id}
-        viewerDelegationByChamber={viewerDelegationByChamber}
-      />
+        <ProfileTierProgressSection
+          className="h-full"
+          requirementItems={requirementItems}
+          tierProgress={tierProgress ?? null}
+        />
+      </div>
 
-      <HumanNodeActivityProjectsSection
-        activityFilter={activityFilter}
-        filteredActions={filteredActions}
-        historyHref={`/app/human-nodes/${id ?? ""}/history`}
-        onActivityFilterChange={setActivityFilter}
-        projects={projects}
-      />
+      <div className="grid items-stretch gap-4 xl:grid-cols-3">
+        <CmEconomyPanel
+          className="h-full"
+          totals={cmTotals}
+          chambers={cmChambers}
+          history={cmHistory}
+          mmValue={cmTotals.acm}
+          totalsScope="personal"
+        />
+
+        <HumanNodeDelegationSection
+          className="h-full"
+          delegationCards={delegationCards}
+          delegationErrorByChamber={delegationErrorByChamber}
+          delegationPendingByChamber={delegationPendingByChamber}
+          isSelfProfile={isSelfProfile}
+          manageableChambers={manageableChambers}
+          onClearDelegation={(chamberId) =>
+            void handleClearDelegation(chamberId)
+          }
+          onDelegateHere={(chamberId) => void handleDelegateHere(chamberId)}
+          profileId={profile.id}
+          viewerDelegationByChamber={viewerDelegationByChamber}
+        />
+
+        <ProfileGovernanceActivitySection
+          className="h-full"
+          activityFilter={activityFilter}
+          filteredActions={filteredActions}
+          historyHref={`/app/human-nodes/${id ?? ""}/history`}
+          onActivityFilterChange={setActivityFilter}
+        />
+      </div>
     </div>
   );
 };
diff --git a/src/pages/human-nodes/components/HumanNodeActivityProjectsSection.tsx b/src/pages/human-nodes/components/HumanNodeActivityProjectsSection.tsx
index 0e4c71d..e832161 100644
--- a/src/pages/human-nodes/components/HumanNodeActivityProjectsSection.tsx
+++ b/src/pages/human-nodes/components/HumanNodeActivityProjectsSection.tsx
@@ -1,12 +1,13 @@
 import { Link } from "react-router";
 
 import { ActivityTile } from "@/components/ActivityTile";
-import { SectionHeader } from "@/components/SectionHeader";
-import { Badge } from "@/components/primitives/badge";
-import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
+import { GlassySection, GlassyTile } from "@/components/GlassySection";
 import { ToggleGroup } from "@/components/ToggleGroup";
 import { ACTIVITY_FILTERS, type ActivityFilter } from "@/lib/profileUi";
+import {
+  FormationProjectCard,
+  formationProjectCardFromProfileProject,
+} from "@/pages/formation/components/FormationProjectCard";
 import type { HumanNodeProfileDto } from "@/types/api";
 
 type GovernanceAction = HumanNodeProfileDto["governanceActions"][number];
@@ -29,9 +30,8 @@ export function HumanNodeActivityProjectsSection({
 }: HumanNodeActivityProjectsSectionProps) {
   return (
     <div className="grid gap-4 lg:grid-cols-2">
-      <div className="space-y-3">
+      <GlassySection title="Governance activity">
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <SectionHeader>Governance activity</SectionHeader>
           <Link
             to={historyHref}
             className="text-sm font-semibold text-primary hover:underline"
@@ -48,6 +48,7 @@ export function HumanNodeActivityProjectsSection({
             value: opt.value,
             label: opt.label,
           }))}
+          className="w-fit"
         />
         {filteredActions.length ? (
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
@@ -59,45 +60,28 @@ export function HumanNodeActivityProjectsSection({
             ))}
           </div>
         ) : (
-          <p className="text-sm text-muted">No activity to show yet.</p>
+          <GlassyTile className="text-sm text-muted">
+            No activity to show yet.
+          </GlassyTile>
         )}
-      </div>
+      </GlassySection>
 
-      <div className="space-y-3">
-        <SectionHeader>Formation projects</SectionHeader>
+      <GlassySection title="Formation projects">
         {projects.length === 0 ? (
-          <p className="text-sm text-muted">
+          <GlassyTile className="text-sm text-muted">
             Not participating in Formation right now.
-          </p>
+          </GlassyTile>
         ) : (
-          <div className="space-y-3">
+          <div className="formation-project-grid formation-project-grid--pair">
             {projects.map((project) => (
-              <Surface
+              <FormationProjectCard
                 key={project.title}
-                variant="panelAlt"
-                radius="xl"
-                shadow="tile"
-                className="px-4 py-3"
-              >
-                <div className="flex flex-col gap-1">
-                  <p className="text-sm font-semibold text-text">
-                    {project.title}
-                  </p>
-                  <Kicker>{project.status}</Kicker>
-                </div>
-                <p className="text-sm text-muted">{project.summary}</p>
-                <div className="flex flex-wrap gap-2 pt-2">
-                  {project.chips.map((chip) => (
-                    <Badge key={chip} variant="outline">
-                      {chip}
-                    </Badge>
-                  ))}
-                </div>
-              </Surface>
+                project={formationProjectCardFromProfileProject(project)}
+              />
             ))}
           </div>
         )}
-      </div>
+      </GlassySection>
     </div>
   );
 }
diff --git a/src/pages/human-nodes/components/HumanNodeDelegationSection.tsx b/src/pages/human-nodes/components/HumanNodeDelegationSection.tsx
index b1418ad..c311477 100644
--- a/src/pages/human-nodes/components/HumanNodeDelegationSection.tsx
+++ b/src/pages/human-nodes/components/HumanNodeDelegationSection.tsx
@@ -1,9 +1,13 @@
 import { AddressInline } from "@/components/AddressInline";
-import { SectionHeader } from "@/components/SectionHeader";
-import { Badge } from "@/components/primitives/badge";
+import {
+  GlassyCompactGrid,
+  GlassyCompactRow,
+  GlassyKeyValue,
+  GlassySection,
+  GlassyStatusChip,
+  GlassyTile,
+} from "@/components/GlassySection";
 import { Button } from "@/components/primitives/button";
-import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
 import { addressesReferToSameIdentity } from "@/lib/addressIdentity";
 import { formatChamberLabel } from "@/lib/chamberUi";
 import { shortAddress } from "@/lib/profileUi";
@@ -14,6 +18,7 @@ type ViewerDelegation =
   GetMyGovernanceResponse["delegation"]["chambers"][number];
 
 type HumanNodeDelegationSectionProps = {
+  className?: string;
   delegationCards: DelegationCard[];
   delegationErrorByChamber: Record<string, string | null>;
   delegationPendingByChamber: Record<string, boolean>;
@@ -26,6 +31,7 @@ type HumanNodeDelegationSectionProps = {
 };
 
 export function HumanNodeDelegationSection({
+  className,
   delegationCards,
   delegationErrorByChamber,
   delegationPendingByChamber,
@@ -36,109 +42,113 @@ export function HumanNodeDelegationSection({
   profileId,
   viewerDelegationByChamber,
 }: HumanNodeDelegationSectionProps) {
-  if (delegationCards.length === 0) {
-    return null;
-  }
-
   return (
-    <section className="space-y-4">
-      <SectionHeader>Delegation</SectionHeader>
-      <div className="grid gap-4 md:grid-cols-2">
-        {delegationCards.map((item) => {
-          const viewerItem =
-            viewerDelegationByChamber.get(item.chamberId) ?? null;
-          const viewerAlreadyDelegatesHere = addressesReferToSameIdentity(
-            viewerItem?.delegateeAddress,
-            profileId,
-          );
-          const canManage =
-            !isSelfProfile &&
-            manageableChambers.some(
-              (chamber) => chamber.chamberId === item.chamberId,
+    <GlassySection className={className} title="Delegation">
+      {delegationCards.length === 0 ? (
+        <GlassyTile className="px-4 py-3 text-sm text-muted">
+          No delegation records yet.
+        </GlassyTile>
+      ) : (
+        <GlassyCompactGrid className="h-full content-start">
+          {delegationCards.map((item) => {
+            const viewerItem =
+              viewerDelegationByChamber.get(item.chamberId) ?? null;
+            const viewerAlreadyDelegatesHere = addressesReferToSameIdentity(
+              viewerItem?.delegateeAddress,
+              profileId,
             );
-          const pending = delegationPendingByChamber[item.chamberId] ?? false;
+            const canManage =
+              !isSelfProfile &&
+              manageableChambers.some(
+                (chamber) => chamber.chamberId === item.chamberId,
+              );
+            const pending = delegationPendingByChamber[item.chamberId] ?? false;
+            const error = delegationErrorByChamber[item.chamberId];
 
-          return (
-            <Surface
-              key={item.chamberId}
-              variant="panelAlt"
-              radius="xl"
-              shadow="tile"
-              className="space-y-3 px-4 py-4"
-            >
-              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                <Kicker>{formatChamberLabel(item.chamberId)}</Kicker>
-                <Badge variant="outline">Inbound {item.inboundWeight}</Badge>
-              </div>
-              <div className="space-y-1">
-                <p className="text-xs font-semibold tracking-wide text-muted uppercase">
-                  Current delegate
-                </p>
-                {item.delegateeAddress ? (
-                  <AddressInline
-                    address={item.delegateeAddress}
-                    textClassName="text-sm text-text"
-                  />
-                ) : (
-                  <p className="text-sm text-text">No delegate set</p>
-                )}
-              </div>
-              {item.inboundDelegators.length > 0 ? (
-                <div className="space-y-1">
-                  <p className="text-xs font-semibold tracking-wide text-muted uppercase">
-                    Delegated by
-                  </p>
-                  <div className="flex flex-wrap gap-2">
-                    {item.inboundDelegators.map((delegator) => (
-                      <Badge key={delegator} variant="muted">
-                        {shortAddress(delegator)}
-                      </Badge>
-                    ))}
+            return (
+              <GlassyCompactRow
+                key={item.chamberId}
+                title={formatChamberLabel(item.chamberId)}
+              >
+                <div className="grid gap-2.5">
+                  <div className="glassy-compact-address">
+                    {item.delegateeAddress ? (
+                      <AddressInline
+                        address={item.delegateeAddress}
+                        textClassName="text-sm text-muted"
+                      />
+                    ) : (
+                      <p className="text-sm text-muted">No delegate set</p>
+                    )}
                   </div>
-                </div>
-              ) : null}
-              {canManage ? (
-                <div className="space-y-2">
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      type="button"
-                      disabled={pending || viewerAlreadyDelegatesHere}
-                      onClick={() => onDelegateHere(item.chamberId)}
-                    >
-                      {viewerAlreadyDelegatesHere
-                        ? "Delegated here"
-                        : "Delegate here"}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      disabled={pending || !viewerAlreadyDelegatesHere}
-                      onClick={() => onClearDelegation(item.chamberId)}
-                    >
-                      Undelegate
-                    </Button>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="Inbound"
+                      value={item.inboundWeight}
+                    />
+                    <GlassyKeyValue
+                      className="glassy-key-value--stacked glassy-key-value--metric"
+                      label="State"
+                      value={item.delegateeAddress ? "Delegating" : "Open"}
+                    />
                   </div>
-                  {viewerItem?.delegateeAddress &&
-                  !viewerAlreadyDelegatesHere ? (
-                    <p className="text-xs text-muted">
-                      You currently delegate this chamber to{" "}
-                      <span className="font-semibold text-text">
-                        {shortAddress(viewerItem.delegateeAddress)}
-                      </span>
-                      .
-                    </p>
+
+                  {item.inboundDelegators.length > 0 ? (
+                    <div className="flex flex-wrap gap-2">
+                      {item.inboundDelegators.map((delegator) => (
+                        <GlassyStatusChip key={delegator}>
+                          {shortAddress(delegator)}
+                        </GlassyStatusChip>
+                      ))}
+                    </div>
                   ) : null}
-                  {delegationErrorByChamber[item.chamberId] ? (
-                    <p className="text-sm text-danger">
-                      {delegationErrorByChamber[item.chamberId]}
-                    </p>
+
+                  {canManage ? (
+                    <div className="grid gap-2">
+                      <div className="grid grid-cols-2 gap-2">
+                        <Button
+                          type="button"
+                          size="compact"
+                          disabled={pending || viewerAlreadyDelegatesHere}
+                          onClick={() => onDelegateHere(item.chamberId)}
+                        >
+                          {viewerAlreadyDelegatesHere
+                            ? "Delegated"
+                            : "Delegate"}
+                        </Button>
+                        <Button
+                          type="button"
+                          size="compact"
+                          variant="outline"
+                          disabled={pending || !viewerAlreadyDelegatesHere}
+                          onClick={() => onClearDelegation(item.chamberId)}
+                        >
+                          Clear
+                        </Button>
+                      </div>
+                      {viewerItem?.delegateeAddress &&
+                      !viewerAlreadyDelegatesHere ? (
+                        <p className="m-0 text-xs text-muted">
+                          You delegate this chamber to{" "}
+                          <span className="font-semibold text-text">
+                            {shortAddress(viewerItem.delegateeAddress)}
+                          </span>
+                          .
+                        </p>
+                      ) : null}
+                      {error ? (
+                        <p className="m-0 text-sm text-danger">{error}</p>
+                      ) : null}
+                    </div>
                   ) : null}
                 </div>
-              ) : null}
-            </Surface>
-          );
-        })}
-      </div>
-    </section>
+              </GlassyCompactRow>
+            );
+          })}
+        </GlassyCompactGrid>
+      )}
+    </GlassySection>
   );
 }
diff --git a/src/pages/human-nodes/components/HumanNodesResultsCard.tsx b/src/pages/human-nodes/components/HumanNodesResultsCard.tsx
index bcab78e..33319a4 100644
--- a/src/pages/human-nodes/components/HumanNodesResultsCard.tsx
+++ b/src/pages/human-nodes/components/HumanNodesResultsCard.tsx
@@ -3,17 +3,13 @@ import { Link } from "react-router";
 import { AddressInline } from "@/components/AddressInline";
 import { HintLabel } from "@/components/Hint";
 import { Kicker } from "@/components/Kicker";
+import { SectionHeader } from "@/components/SectionHeader";
 import { StatTile } from "@/components/StatTile";
 import { TierLabel } from "@/components/TierLabel";
 import { ToggleGroup } from "@/components/ToggleGroup";
 import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/components/primitives/card";
+import { Card, CardContent, CardFooter } from "@/components/primitives/card";
 import { Label } from "@/components/primitives/label";
 import { Select } from "@/components/primitives/select";
 import {
@@ -54,11 +50,11 @@ export function HumanNodesResultsCard({
   sortBy,
 }: HumanNodesResultsCardProps) {
   return (
-    <Card className="w-full">
-      <CardHeader className="pb-2">
+    <section className="flex w-full flex-col gap-3">
+      <SectionHeader>
         <Kicker>Results ({filtered.length})</Kicker>
-      </CardHeader>
-      <CardContent className="space-y-3 pt-0">
+      </SectionHeader>
+      <div className="space-y-3">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <div className="flex w-full flex-col items-start gap-2 sm:w-auto sm:flex-row sm:items-center">
             <Label htmlFor="sort" className="font-semibold">
@@ -109,15 +105,11 @@ export function HumanNodesResultsCard({
                     : `${formationProjects[0]} + ${
                         formationProjects.length - 1
                       }`;
-              const cmTotals = node.cmTotals ?? {
-                lcm: 0,
-                mcm: 0,
-                acm: node.acm,
-              };
               const tileItems = [
-                { label: "LCM", value: cmTotals.lcm.toString() },
-                { label: "MCM", value: cmTotals.mcm.toString() },
-                { label: "ACM", value: cmTotals.acm.toString() },
+                {
+                  label: "ACM",
+                  value: (node.cmTotals?.acm ?? node.acm).toString(),
+                },
                 {
                   label: "Tier",
                   value: (
@@ -254,12 +246,6 @@ export function HumanNodesResultsCard({
                           </HintLabel>{" "}
                           {node.cmTotals?.acm ?? node.acm}
                         </Badge>
-                        <Badge size="sm" variant="outline">
-                          LCM {node.cmTotals?.lcm ?? 0}
-                        </Badge>
-                        <Badge size="sm" variant="outline">
-                          MCM {node.cmTotals?.mcm ?? 0}
-                        </Badge>
                         {node.formationCapable && (
                           <Badge size="sm" variant="outline">
                             Active node
@@ -278,7 +264,7 @@ export function HumanNodesResultsCard({
             })}
           </div>
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </section>
   );
 }
diff --git a/src/pages/invision/Invision.tsx b/src/pages/invision/Invision.tsx
index 3e4ee17..349b059 100644
--- a/src/pages/invision/Invision.tsx
+++ b/src/pages/invision/Invision.tsx
@@ -1,29 +1,124 @@
 import { useEffect, useMemo, useState } from "react";
+
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+  GlassyCompactGrid,
+  GlassyCompactMetric,
+  GlassyCompactRow,
+  GlassyKeyValue,
+  GlassyMetricTile,
+  GlassySection,
+  GlassyStatusChip,
+  GlassyTile,
+} from "@/components/GlassySection";
 import { HintLabel } from "@/components/Hint";
-import { SearchBar } from "@/components/SearchBar";
-import { Surface } from "@/components/Surface";
-import { PageHint } from "@/components/PageHint";
-import { Kicker } from "@/components/Kicker";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { PageHint } from "@/components/PageHint";
 import { apiFactions, apiInvision } from "@/lib/apiClient";
 import { formatLoadError } from "@/lib/errorFormatting";
-import type { FactionDto, GetInvisionResponse } from "@/types/api";
+import type {
+  FactionDto,
+  GetInvisionResponse,
+  InvisionDecentralizationDto,
+  InvisionStabilityDto,
+  InvisionStabilityComponentDto,
+} from "@/types/api";
+
+type EngineDto = InvisionDecentralizationDto | InvisionStabilityDto;
+type StatusTone = "danger" | "neutral" | "ok" | "primary" | "warn";
+
+function toneForScore(tone: InvisionStabilityComponentDto["tone"]) {
+  if (tone === "critical") return "danger";
+  if (tone === "watch") return "primary";
+  return "ok";
+}
+
+function toneForConfidence(engine: EngineDto): StatusTone {
+  if (engine.confidenceBand === "High" || engine.confidence >= 75) return "ok";
+  if (engine.confidenceBand === "Medium" || engine.confidence >= 50) {
+    return "warn";
+  }
+  return "danger";
+}
+
+function toneForRiskStatus(status: string) {
+  const normalized = status.trim().toLowerCase();
+  if (normalized === "critical") return "danger";
+  if (normalized === "ok" || normalized === "healthy") return "ok";
+  return "primary";
+}
+
+function EngineSection({
+  engine,
+  title,
+}: {
+  engine: EngineDto;
+  title: string;
+}) {
+  return (
+    <GlassySection className="h-full" title={title}>
+      <GlassyCompactGrid className="lg:grid-cols-3">
+        <GlassyCompactMetric label="Band" value={engine.band} />
+        <GlassyCompactMetric
+          label="Confidence"
+          value={
+            <GlassyStatusChip tone={toneForConfidence(engine)}>
+              {engine.confidence}% · {engine.confidenceBand}
+            </GlassyStatusChip>
+          }
+        />
+        <GlassyCompactMetric label="Timeframe" value={engine.windowLabel} />
+      </GlassyCompactGrid>
+
+      <GlassyCompactGrid className="lg:grid-cols-2">
+        {engine.components.map((component) => (
+          <GlassyCompactRow
+            key={component.label}
+            title={component.label}
+            actions={
+              <GlassyStatusChip tone={toneForScore(component.tone)}>
+                {component.score}%
+              </GlassyStatusChip>
+            }
+          >
+            <p className="m-0 text-xs text-muted">{component.detail}</p>
+          </GlassyCompactRow>
+        ))}
+      </GlassyCompactGrid>
+    </GlassySection>
+  );
+}
+
+function FactionCard({ faction }: { faction: FactionDto }) {
+  return (
+    <GlassyCompactRow
+      title={faction.name}
+      actions={
+        <GlassyStatusChip tone="neutral">
+          {faction.members} members
+        </GlassyStatusChip>
+      }
+    >
+      <p className="m-0 text-xs text-muted">{faction.description}</p>
+      <div className="grid grid-cols-2 gap-2">
+        <GlassyKeyValue
+          className="glassy-key-value--stacked glassy-key-value--metric"
+          label="Members"
+          value={faction.members}
+        />
+        <GlassyKeyValue
+          className="glassy-key-value--stacked glassy-key-value--metric"
+          label={<HintLabel termId="acm" prefix="Members'" termText="ACM" />}
+          value={faction.acm}
+        />
+      </div>
+    </GlassyCompactRow>
+  );
+}
 
 const Invision: React.FC = () => {
   const [invision, setInvision] = useState<GetInvisionResponse | null>(null);
   const [factions, setFactions] = useState<FactionDto[] | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
-  const [search, setSearch] = useState("");
-  const [filters, setFilters] = useState<{
-    factionSort: "members" | "acm";
-  }>({ factionSort: "members" });
-  const { factionSort } = filters;
 
   useEffect(() => {
     let active = true;
@@ -50,354 +145,130 @@ const Invision: React.FC = () => {
   }, []);
 
   const filteredFactions = useMemo(() => {
-    const term = search.trim().toLowerCase();
-    return [...(factions ?? [])]
-      .filter(
-        (f) =>
-          term.length === 0 ||
-          f.name.toLowerCase().includes(term) ||
-          f.description.toLowerCase().includes(term),
-      )
-      .sort((a, b) => {
-        if (factionSort === "members") return b.members - a.members;
-        return (
-          parseInt(b.acm.replace(/[,]/g, ""), 10) -
-          parseInt(a.acm.replace(/[,]/g, ""), 10)
-        );
-      });
-  }, [factions, search, factionSort]);
+    return [...(factions ?? [])].sort((a, b) => b.members - a.members);
+  }, [factions]);
 
   const hasInvisionContent =
     Boolean(invision?.governanceState.metrics.length) ||
     Boolean(invision?.economicIndicators.length) ||
-    Boolean(invision?.riskSignals.length) ||
-    Boolean(invision?.chamberProposals.length);
+    Boolean(invision?.riskSignals.length);
   const primaryGovernanceMetrics = (
     invision?.governanceState.metrics ?? []
   ).slice(0, 3);
   const secondaryGovernanceMetrics = (
     invision?.governanceState.metrics ?? []
   ).slice(3);
-  const decentralization = invision?.decentralization ?? null;
-  const stability = invision?.stability ?? null;
-  const stabilityToneClass = (tone: "positive" | "watch" | "critical") => {
-    if (tone === "critical") return "text-destructive";
-    if (tone === "watch") return "text-primary";
-    return "text-text";
-  };
 
   return (
     <div className="flex flex-col gap-5">
-      <div className="flex flex-col gap-5">
-        <PageHint pageId="invision" />
-        {invision === null && !loadError ? (
-          <Card className="border-dashed px-4 py-6 text-center text-sm text-muted">
-            Loading Invision…
-          </Card>
-        ) : null}
-        {loadError ? (
-          <Card className="border-dashed px-4 py-6 text-center text-sm text-destructive">
-            Invision unavailable: {formatLoadError(loadError)}
-          </Card>
-        ) : null}
-        {invision !== null &&
-        factions !== null &&
-        factions.length === 0 &&
-        !hasInvisionContent &&
-        !loadError ? (
-          <NoDataYetBar label="Invision data" />
-        ) : null}
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          <Surface
-            variant="panelAlt"
-            className="px-6 py-5 text-center sm:col-span-2 lg:col-span-3"
-          >
-            <Kicker align="center">System state</Kicker>
-            <h1 className="text-2xl font-semibold text-text">
-              {invision?.governanceState.label ?? "—"}
-            </h1>
-          </Surface>
-          {primaryGovernanceMetrics.map((metric) => (
-            <Surface
-              key={metric.label}
-              variant="panel"
-              className="px-4 py-4 text-center"
-            >
-              <Kicker align="center">{metric.label}</Kicker>
-              <p className="text-3xl font-semibold text-text">{metric.value}</p>
-            </Surface>
-          ))}
-        </div>
-
-        {secondaryGovernanceMetrics.length > 0 ? (
-          <Card>
-            <CardHeader className="pb-2">
-              <CardTitle>Governance signals</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-3 text-sm text-text sm:grid-cols-2 lg:grid-cols-3">
-              {secondaryGovernanceMetrics.map((metric) => (
-                <div
-                  key={metric.label}
-                  className="rounded-xl border border-border px-3 py-3"
-                >
-                  <Kicker>{metric.label}</Kicker>
-                  <p className="text-lg font-semibold text-text">
-                    {metric.value}
-                  </p>
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-        ) : null}
-
-        {decentralization ? (
-          <Card>
-            <CardHeader className="pb-2">
-              <CardTitle>Decentralization engine</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4 text-sm text-text">
-              <div className="grid gap-3 sm:grid-cols-3">
-                <div className="rounded-xl border border-border px-3 py-3">
-                  <Kicker>Band</Kicker>
-                  <p className="text-lg font-semibold text-text">
-                    {decentralization.band}
-                  </p>
-                </div>
-                <div className="rounded-xl border border-border px-3 py-3">
-                  <Kicker>Confidence</Kicker>
-                  <p className="text-lg font-semibold text-text">
-                    {decentralization.confidence}% ·{" "}
-                    {decentralization.confidenceBand}
-                  </p>
-                </div>
-                <div className="rounded-xl border border-border px-3 py-3">
-                  <Kicker>Timeframe</Kicker>
-                  <p className="text-lg font-semibold text-text">
-                    {decentralization.windowLabel}
-                  </p>
-                </div>
-              </div>
-
-              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-                {decentralization.components.map((component) => (
-                  <div
-                    key={component.label}
-                    className="rounded-xl border border-border px-3 py-3"
-                  >
-                    <Kicker>{component.label}</Kicker>
-                    <p
-                      className={`text-lg font-semibold ${stabilityToneClass(component.tone)}`}
-                    >
-                      {component.score}%
-                    </p>
-                    <p className="text-xs text-muted">{component.detail}</p>
-                  </div>
-                ))}
-              </div>
+      <PageHint pageId="invision" />
 
-              {decentralization.capsApplied.length > 0 ? (
-                <div className="rounded-xl border border-border px-3 py-3">
-                  <Kicker>Active caps</Kicker>
-                  <div className="space-y-1 text-xs text-muted">
-                    {decentralization.capsApplied.map((cap) => (
-                      <p key={cap}>{cap}</p>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
-            </CardContent>
-          </Card>
-        ) : null}
+      {invision === null && !loadError ? (
+        <GlassyTile className="px-4 py-6 text-center text-sm text-muted">
+          Loading Invision…
+        </GlassyTile>
+      ) : null}
 
-        {stability ? (
-          <Card>
-            <CardHeader className="pb-2">
-              <CardTitle>Stability engine</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4 text-sm text-text">
-              <div className="grid gap-3 sm:grid-cols-3">
-                <div className="rounded-xl border border-border px-3 py-3">
-                  <Kicker>Band</Kicker>
-                  <p className="text-lg font-semibold text-text">
-                    {stability.band}
-                  </p>
-                </div>
-                <div className="rounded-xl border border-border px-3 py-3">
-                  <Kicker>Confidence</Kicker>
-                  <p className="text-lg font-semibold text-text">
-                    {stability.confidence}% · {stability.confidenceBand}
-                  </p>
-                </div>
-                <div className="rounded-xl border border-border px-3 py-3">
-                  <Kicker>Timeframe</Kicker>
-                  <p className="text-lg font-semibold text-text">
-                    {stability.windowLabel}
-                  </p>
-                </div>
-              </div>
+      {loadError ? (
+        <GlassyTile className="px-4 py-6 text-center text-sm text-destructive">
+          Invision unavailable: {formatLoadError(loadError)}
+        </GlassyTile>
+      ) : null}
 
-              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-                {stability.components.map((component) => (
-                  <div
-                    key={component.label}
-                    className="rounded-xl border border-border px-3 py-3"
-                  >
-                    <Kicker>{component.label}</Kicker>
-                    <p
-                      className={`text-lg font-semibold ${stabilityToneClass(component.tone)}`}
-                    >
-                      {component.score}%
-                    </p>
-                    <p className="text-xs text-muted">{component.detail}</p>
-                  </div>
-                ))}
-              </div>
+      {invision !== null &&
+      factions !== null &&
+      factions.length === 0 &&
+      !hasInvisionContent &&
+      !loadError ? (
+        <NoDataYetBar label="Invision data" />
+      ) : null}
 
-              {stability.capsApplied.length > 0 ? (
-                <div className="rounded-xl border border-border px-3 py-3">
-                  <Kicker>Active caps</Kicker>
-                  <div className="space-y-1 text-xs text-muted">
-                    {stability.capsApplied.map((cap) => (
-                      <p key={cap}>{cap}</p>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
-            </CardContent>
-          </Card>
-        ) : null}
-
-        <SearchBar
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder="Search factions, blocs, proposals…"
-          ariaLabel="Search invision"
-          filtersConfig={[
-            {
-              key: "factionSort",
-              label: "Sort factions",
-              options: [
-                { value: "members", label: "Members (desc)" },
-                { value: "acm", label: "ACM (desc)" },
-              ],
-            },
-          ]}
-          filtersState={filters}
-          onFiltersChange={setFilters}
-        />
+      <GlassySection title="System state">
+        <GlassyTile className="px-6 py-5 text-center">
+          <p className="m-0 text-xs font-semibold text-muted uppercase">
+            Governance model
+          </p>
+          <h1 className="m-0 mt-1 text-2xl font-semibold text-text">
+            {invision?.governanceState.label ?? "—"}
+          </h1>
+        </GlassyTile>
+        <GlassyCompactGrid className="lg:grid-cols-3">
+          {primaryGovernanceMetrics.map((metric) => (
+            <GlassyMetricTile
+              key={metric.label}
+              label={metric.label}
+              value={metric.value}
+            />
+          ))}
+        </GlassyCompactGrid>
+      </GlassySection>
 
-        <div className="grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
-          <Card className="h-full">
-            <CardHeader className="pb-2">
-              <CardTitle>Largest factions</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-4 text-sm text-text sm:grid-cols-2">
-              {filteredFactions.map((faction) => (
-                <div key={faction.name} className="contents">
-                  <Surface variant="panelAlt" className="px-5 py-4">
-                    <p className="text-lg font-semibold text-text">
-                      {faction.name}
-                    </p>
-                    <Kicker className="text-primary">
-                      {faction.description}
-                    </Kicker>
-                    <div className="mt-3 grid grid-cols-2 gap-2 text-center">
-                      <Surface
-                        variant="panel"
-                        radius="xl"
-                        shadow="control"
-                        className="px-2 py-2"
-                      >
-                        <Kicker align="center" className="text-[0.7rem]">
-                          Members
-                        </Kicker>
-                        <p className="text-lg font-semibold">
-                          {faction.members}
-                        </p>
-                      </Surface>
-                      <Surface
-                        variant="panel"
-                        radius="xl"
-                        shadow="control"
-                        className="px-2 py-2"
-                      >
-                        <Kicker align="center" className="text-[0.7rem]">
-                          <HintLabel termId="acm">ACM</HintLabel>
-                        </Kicker>
-                        <p className="text-lg font-semibold capitalize">
-                          {faction.acm}
-                        </p>
-                      </Surface>
-                    </div>
-                  </Surface>
-                </div>
-              ))}
-            </CardContent>
-          </Card>
+      {secondaryGovernanceMetrics.length > 0 ? (
+        <GlassySection title="Governance signals">
+          <GlassyCompactGrid className="lg:grid-cols-3">
+            {secondaryGovernanceMetrics.map((metric) => (
+              <GlassyCompactMetric
+                key={metric.label}
+                label={metric.label}
+                value={metric.value}
+              />
+            ))}
+          </GlassyCompactGrid>
+        </GlassySection>
+      ) : null}
 
-          <Card className="h-full">
-            <CardHeader className="pb-2">
-              <CardTitle>Treasury & economy</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3 text-sm text-text">
-              {(invision?.economicIndicators ?? []).map((indicator) => (
-                <div
-                  key={indicator.label}
-                  className="rounded-xl border border-border px-3 py-2"
-                >
-                  <Kicker>{indicator.label}</Kicker>
-                  <p className="text-lg font-semibold text-text">
-                    {indicator.value}
-                  </p>
-                  <p className="text-xs text-muted">{indicator.detail}</p>
-                </div>
-              ))}
-            </CardContent>
-          </Card>
+      {invision?.decentralization && invision.stability ? (
+        <div className="grid items-start gap-4 xl:grid-cols-2">
+          <EngineSection
+            engine={invision.decentralization}
+            title="Decentralization engine"
+          />
+          <EngineSection engine={invision.stability} title="Stability engine" />
         </div>
+      ) : null}
 
-        <div className="grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
-          <Card className="h-full">
-            <CardHeader className="pb-2">
-              <CardTitle>Risk dashboard</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-3 text-sm text-text sm:grid-cols-2">
-              {(invision?.riskSignals ?? []).map((signal) => (
-                <div
-                  key={signal.title}
-                  className="rounded-xl border border-border px-3 py-3"
-                >
-                  <Kicker>{signal.title}</Kicker>
-                  <p className="text-base font-semibold text-primary">
-                    {signal.status}
-                  </p>
-                  <p className="text-xs text-muted">{signal.detail}</p>
-                </div>
-              ))}
-            </CardContent>
-          </Card>
+      <div className="grid items-start gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(20rem,1fr)]">
+        <GlassySection className="h-full" title="Largest factions">
+          <GlassyCompactGrid>
+            {filteredFactions.map((faction) => (
+              <FactionCard key={faction.id} faction={faction} />
+            ))}
+          </GlassyCompactGrid>
+        </GlassySection>
 
-          <Card className="h-full">
-            <CardHeader className="pb-2">
-              <CardTitle>General chamber proposals</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3 text-sm text-text">
-              {(invision?.chamberProposals ?? []).map((proposal) => (
-                <div
-                  key={proposal.title}
-                  className="rounded-xl border border-border px-3 py-3"
-                >
-                  <p className="text-base font-semibold text-text">
-                    {proposal.title}
-                  </p>
-                  <Kicker className="text-primary">{proposal.effect}</Kicker>
-                  <p className="text-xs text-muted">{proposal.sponsors}</p>
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-        </div>
+        <GlassySection className="h-full" title="Treasury & economy">
+          <GlassyCompactGrid>
+            {(invision?.economicIndicators ?? []).map((indicator) => (
+              <GlassyCompactRow key={indicator.label} title={indicator.label}>
+                <GlassyKeyValue
+                  className="glassy-key-value--stacked glassy-key-value--metric"
+                  label="Value"
+                  value={indicator.value}
+                />
+                <p className="m-0 text-xs text-muted">{indicator.detail}</p>
+              </GlassyCompactRow>
+            ))}
+          </GlassyCompactGrid>
+        </GlassySection>
       </div>
+
+      <GlassySection title="Risk dashboard">
+        <GlassyCompactGrid className="lg:grid-cols-3">
+          {(invision?.riskSignals ?? []).map((signal) => (
+            <GlassyCompactRow
+              key={signal.title}
+              title={signal.title}
+              actions={
+                <GlassyStatusChip tone={toneForRiskStatus(signal.status)}>
+                  {signal.status}
+                </GlassyStatusChip>
+              }
+            >
+              <p className="m-0 text-xs text-muted">{signal.detail}</p>
+            </GlassyCompactRow>
+          ))}
+        </GlassyCompactGrid>
+      </GlassySection>
     </div>
   );
 };
diff --git a/src/pages/my-governance/components/MyGovernanceChambersCard.tsx b/src/pages/my-governance/components/MyGovernanceChambersCard.tsx
index 20f8bba..ceddafe 100644
--- a/src/pages/my-governance/components/MyGovernanceChambersCard.tsx
+++ b/src/pages/my-governance/components/MyGovernanceChambersCard.tsx
@@ -1,15 +1,9 @@
 import { Link } from "react-router";
 import { AppCard } from "@/components/AppCard";
+import { GlassySection, GlassyStatusChip } from "@/components/GlassySection";
 import { PipelineList } from "@/components/PipelineList";
 import { StatGrid, makeChamberStats } from "@/components/StatGrid";
-import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
 import type { ChamberDto } from "@/types/api";
 
 type MyGovernanceChambersCardProps = {
@@ -20,38 +14,31 @@ export function MyGovernanceChambersCard({
   myChambers,
 }: MyGovernanceChambersCardProps) {
   return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle>My chambers</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-          {myChambers.map((chamber) => (
-            <AppCard
-              key={chamber.id}
-              title={<span className="text-xl font-bold">{chamber.name}</span>}
-              badge={
-                <Badge
-                  size="md"
-                  className="border-none bg-(--primary-dim) px-4 py-1 text-center text-sm font-bold tracking-wide whitespace-nowrap text-primary uppercase"
-                >
-                  M × {chamber.multiplier}
-                </Badge>
-              }
-              footer={
-                <div className="flex w-full justify-center">
-                  <Button asChild size="md" variant="primary" className="w-56">
-                    <Link to={`/app/chambers/${chamber.id}`}>Enter</Link>
-                  </Button>
-                </div>
-              }
-            >
-              <StatGrid items={makeChamberStats(chamber.stats)} />
-              <PipelineList pipeline={chamber.pipeline} />
-            </AppCard>
-          ))}
-        </section>
-      </CardContent>
-    </Card>
+    <GlassySection title="My chambers">
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {myChambers.map((chamber) => (
+          <AppCard
+            key={chamber.id}
+            surface="glass"
+            title={<span className="glassy-tile-heading">{chamber.name}</span>}
+            badge={
+              <GlassyStatusChip tone="primary" className="uppercase">
+                M × {chamber.multiplier}
+              </GlassyStatusChip>
+            }
+            footer={
+              <div className="flex w-full justify-center">
+                <Button asChild size="md" variant="primary" className="w-56">
+                  <Link to={`/app/chambers/${chamber.id}`}>Enter</Link>
+                </Button>
+              </div>
+            }
+          >
+            <StatGrid items={makeChamberStats(chamber.stats)} surface="glass" />
+            <PipelineList pipeline={chamber.pipeline} surface="glass" />
+          </AppCard>
+        ))}
+      </div>
+    </GlassySection>
   );
 }
diff --git a/src/pages/my-governance/components/MyGovernanceCmEconomyCard.tsx b/src/pages/my-governance/components/MyGovernanceCmEconomyCard.tsx
index d1aad2e..17aa857 100644
--- a/src/pages/my-governance/components/MyGovernanceCmEconomyCard.tsx
+++ b/src/pages/my-governance/components/MyGovernanceCmEconomyCard.tsx
@@ -1,12 +1,5 @@
-import { Badge } from "@/components/primitives/badge";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
-import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
+import { CmEconomyPanel } from "@/components/CmEconomyPanel";
+import { GlassySection, GlassyTile } from "@/components/GlassySection";
 import type { CmSummaryDto } from "@/types/api";
 
 type MyGovernanceCmEconomyCardProps = {
@@ -16,80 +9,23 @@ type MyGovernanceCmEconomyCardProps = {
 export function MyGovernanceCmEconomyCard({
   cmSummary,
 }: MyGovernanceCmEconomyCardProps) {
+  if (cmSummary) {
+    return (
+      <CmEconomyPanel
+        totals={cmSummary.totals}
+        chambers={cmSummary.chambers}
+        history={cmSummary.history}
+        mmValue={cmSummary.totals.acm}
+        totalsScope="personal"
+      />
+    );
+  }
+
   return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle>CM economy</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {!cmSummary ? (
-          <Surface
-            variant="panelAlt"
-            radius="2xl"
-            shadow="tile"
-            className="px-4 py-3 text-sm text-muted"
-          >
-            CM summary unavailable.
-          </Surface>
-        ) : (
-          <>
-            <div className="grid gap-3 sm:grid-cols-3">
-              {[
-                { label: "LCM", value: cmSummary.totals.lcm },
-                { label: "MCM", value: cmSummary.totals.mcm },
-                { label: "ACM", value: cmSummary.totals.acm },
-              ].map((tile) => (
-                <Surface
-                  key={tile.label}
-                  variant="panelAlt"
-                  radius="xl"
-                  shadow="tile"
-                  className="px-4 py-3 text-center"
-                >
-                  <Kicker align="center">{tile.label}</Kicker>
-                  <p className="text-xl font-semibold text-text">
-                    {tile.value.toLocaleString()}
-                  </p>
-                </Surface>
-              ))}
-            </div>
-            <div className="grid gap-3 md:grid-cols-2">
-              {cmSummary.chambers.length === 0 ? (
-                <Surface
-                  variant="panelAlt"
-                  radius="xl"
-                  shadow="tile"
-                  className="px-4 py-3 text-sm text-muted"
-                >
-                  No CM awards yet.
-                </Surface>
-              ) : (
-                cmSummary.chambers.map((chamber) => (
-                  <Surface
-                    key={chamber.chamberId}
-                    variant="panelAlt"
-                    radius="xl"
-                    shadow="tile"
-                    className="space-y-2 px-4 py-3"
-                  >
-                    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                      <p className="text-sm font-semibold text-text">
-                        {chamber.chamberTitle}
-                      </p>
-                      <Badge variant="outline">M × {chamber.multiplier}</Badge>
-                    </div>
-                    <div className="grid grid-cols-3 gap-2 text-xs text-muted">
-                      <span>LCM {chamber.lcm}</span>
-                      <span>MCM {chamber.mcm}</span>
-                      <span>ACM {chamber.acm}</span>
-                    </div>
-                  </Surface>
-                ))
-              )}
-            </div>
-          </>
-        )}
-      </CardContent>
-    </Card>
+    <GlassySection title="CM + MM">
+      <GlassyTile className="px-4 py-3 text-sm text-muted">
+        CM summary unavailable.
+      </GlassyTile>
+    </GlassySection>
   );
 }
diff --git a/src/pages/my-governance/components/MyGovernanceDelegationCard.tsx b/src/pages/my-governance/components/MyGovernanceDelegationCard.tsx
index 9c83f59..920ad51 100644
--- a/src/pages/my-governance/components/MyGovernanceDelegationCard.tsx
+++ b/src/pages/my-governance/components/MyGovernanceDelegationCard.tsx
@@ -1,139 +1,269 @@
+import { useMemo, useState } from "react";
+
 import { AddressInline } from "@/components/AddressInline";
-import { Badge } from "@/components/primitives/badge";
-import { Button } from "@/components/primitives/button";
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+  GlassyCompactGrid,
+  GlassyCompactRow,
+  GlassyKeyValue,
+  GlassySection,
+  GlassyStatusChip,
+  GlassyTile,
+} from "@/components/GlassySection";
+import { Modal } from "@/components/Modal";
+import { Button } from "@/components/primitives/button";
 import { Input } from "@/components/primitives/input";
-import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
+import { addressesReferToSameIdentity } from "@/lib/addressIdentity";
 import { formatChamberLabel } from "@/lib/chamberUi";
-import type { ChamberDto, GetMyGovernanceResponse } from "@/types/api";
+import type {
+  ChamberDto,
+  ChamberGovernorDto,
+  GetMyGovernanceResponse,
+} from "@/types/api";
 
 type DelegationItem = GetMyGovernanceResponse["delegation"]["chambers"][number];
 
 type MyGovernanceDelegationCardProps = {
   chambers: ChamberDto[];
   delegationChambers: DelegationItem[];
-  delegationDrafts: Record<string, string>;
   delegationErrorByChamber: Record<string, string | null>;
+  delegationGovernorsByChamber: Record<string, ChamberGovernorDto[]>;
   delegationPendingByChamber: Record<string, boolean>;
   onClearDelegation: (chamberId: string) => void;
-  onSetDelegation: (chamberId: string) => void;
-  onUpdateDelegationDraft: (chamberId: string, value: string) => void;
+  onSetDelegation: (chamberId: string, delegateeAddress: string) => void;
+  viewerAddress: string | null;
 };
 
 export function MyGovernanceDelegationCard({
   chambers,
-  delegationChambers,
-  delegationDrafts,
-  delegationErrorByChamber,
-  delegationPendingByChamber,
+  delegationChambers = [],
+  delegationErrorByChamber = {},
+  delegationGovernorsByChamber = {},
+  delegationPendingByChamber = {},
   onClearDelegation,
   onSetDelegation,
-  onUpdateDelegationDraft,
+  viewerAddress,
 }: MyGovernanceDelegationCardProps) {
+  const [pickerChamberId, setPickerChamberId] = useState<string | null>(null);
+  const [pickerSearch, setPickerSearch] = useState("");
+  const pickerItem = useMemo(
+    () =>
+      delegationChambers.find((item) => item.chamberId === pickerChamberId) ??
+      null,
+    [delegationChambers, pickerChamberId],
+  );
+  const pickerGovernors = useMemo(() => {
+    if (!pickerItem) return [];
+    return (delegationGovernorsByChamber[pickerItem.chamberId] ?? []).filter(
+      (governor) =>
+        !viewerAddress ||
+        !addressesReferToSameIdentity(governor.id, viewerAddress),
+    );
+  }, [delegationGovernorsByChamber, pickerItem, viewerAddress]);
+  const visiblePickerGovernors = useMemo(() => {
+    const term = pickerSearch.trim().toLowerCase();
+    if (!term) return pickerGovernors;
+    return pickerGovernors.filter((governor) =>
+      [governor.name, governor.id, governor.tier, governor.focus]
+        .join(" ")
+        .toLowerCase()
+        .includes(term),
+    );
+  }, [pickerGovernors, pickerSearch]);
+
   return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle>Delegation</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {delegationChambers.length ? (
-          <div className="grid gap-3 md:grid-cols-2">
-            {delegationChambers.map((item) => {
-              const pending =
-                delegationPendingByChamber[item.chamberId] ?? false;
-              const currentValue =
-                delegationDrafts[item.chamberId] ?? item.delegateeAddress ?? "";
+    <GlassySection title="Delegation">
+      {delegationChambers.length ? (
+        <GlassyCompactGrid>
+          {delegationChambers.map((item) => {
+            const pending = delegationPendingByChamber[item.chamberId] ?? false;
+            const availableGovernors =
+              delegationGovernorsByChamber[item.chamberId] ?? [];
+            const selectableGovernors = availableGovernors.filter(
+              (governor) =>
+                !viewerAddress ||
+                !addressesReferToSameIdentity(governor.id, viewerAddress),
+            );
 
-              return (
-                <Surface
-                  key={item.chamberId}
-                  variant="panelAlt"
-                  radius="2xl"
-                  shadow="tile"
-                  className="space-y-3 p-4"
-                >
-                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                    <div>
-                      <Kicker>
-                        {formatChamberLabel(item.chamberId, chambers)}
-                      </Kicker>
-                      <p className="mt-1 text-sm font-semibold text-text">
-                        Current delegate
-                      </p>
-                      {item.delegateeAddress ? (
-                        <AddressInline
-                          address={item.delegateeAddress}
-                          textClassName="text-sm text-muted"
-                        />
-                      ) : (
-                        <p className="text-sm text-muted">No delegate set</p>
-                      )}
-                    </div>
-                    <Badge variant="outline">
-                      Inbound weight {item.inboundWeight}
-                    </Badge>
+            return (
+              <GlassyCompactRow
+                key={item.chamberId}
+                title={formatChamberLabel(item.chamberId, chambers)}
+              >
+                <div className="grid gap-2.5">
+                  <div className="glassy-compact-address">
+                    {item.delegateeAddress ? (
+                      <AddressInline
+                        address={item.delegateeAddress}
+                        textClassName="text-sm text-muted"
+                      />
+                    ) : (
+                      <p className="text-sm text-muted">No delegate set</p>
+                    )}
                   </div>
 
-                  <div className="space-y-2">
-                    <Input
-                      value={currentValue}
-                      onChange={(event) =>
-                        onUpdateDelegationDraft(
-                          item.chamberId,
-                          event.target.value,
-                        )
-                      }
-                      placeholder="Delegate address"
-                      disabled={pending}
-                    />
-                    <div className="flex flex-wrap gap-2">
-                      <Button
-                        type="button"
-                        onClick={() => onSetDelegation(item.chamberId)}
-                        disabled={pending || currentValue.trim().length === 0}
-                      >
-                        {item.delegateeAddress
-                          ? "Update delegate"
-                          : "Set delegate"}
-                      </Button>
+                  <div className="grid gap-2">
+                    <div className="grid grid-cols-2 gap-2">
+                      <GlassyKeyValue
+                        className="glassy-key-value--stacked glassy-key-value--metric"
+                        label="Inbound"
+                        value={item.inboundWeight}
+                      />
+                      <GlassyKeyValue
+                        className="glassy-key-value--stacked glassy-key-value--metric"
+                        label="State"
+                        value={item.delegateeAddress ? "Delegating" : "Open"}
+                      />
+                    </div>
+                    <div className="glassy-compact-command-row">
                       <Button
                         type="button"
-                        variant="outline"
-                        onClick={() => onClearDelegation(item.chamberId)}
-                        disabled={pending || item.delegateeAddress === null}
+                        size="compact"
+                        variant="ghost"
+                        onClick={() => {
+                          setPickerSearch("");
+                          setPickerChamberId(item.chamberId);
+                        }}
+                        disabled={pending || selectableGovernors.length === 0}
                       >
-                        Clear
+                        {item.delegateeAddress ? "Change" : "Choose"}
                       </Button>
+                      <div className="glassy-compact-command-row__actions">
+                        <Button
+                          type="button"
+                          size="compact"
+                          variant="outline"
+                          onClick={() => onClearDelegation(item.chamberId)}
+                          disabled={pending || item.delegateeAddress === null}
+                        >
+                          Clear
+                        </Button>
+                      </div>
                     </div>
                   </div>
+                </div>
 
-                  {delegationErrorByChamber[item.chamberId] ? (
-                    <p className="text-sm text-danger">
-                      {delegationErrorByChamber[item.chamberId]}
-                    </p>
-                  ) : null}
-                </Surface>
-              );
-            })}
+                {delegationErrorByChamber[item.chamberId] ? (
+                  <p className="text-sm text-danger">
+                    {delegationErrorByChamber[item.chamberId]}
+                  </p>
+                ) : null}
+              </GlassyCompactRow>
+            );
+          })}
+        </GlassyCompactGrid>
+      ) : (
+        <GlassyTile className="px-4 py-3 text-sm text-muted">
+          Delegation becomes available once you are participating in chamber
+          governance.
+        </GlassyTile>
+      )}
+      <Modal
+        open={pickerItem !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPickerSearch("");
+            setPickerChamberId(null);
+          }
+        }}
+        ariaLabel="Choose delegation governor"
+        contentClassName="max-w-2xl"
+      >
+        <GlassyTile className="glassy-picker-modal">
+          <div className="glassy-picker-modal__header">
+            <div>
+              <p className="glassy-picker-modal__eyebrow">Choose delegate</p>
+              <p className="glassy-picker-modal__title">
+                {pickerItem
+                  ? formatChamberLabel(pickerItem.chamberId, chambers)
+                  : "Chamber"}
+              </p>
+            </div>
+            <Button
+              type="button"
+              size="compact"
+              variant="outline"
+              onClick={() => {
+                setPickerSearch("");
+                setPickerChamberId(null);
+              }}
+            >
+              Close
+            </Button>
           </div>
-        ) : (
-          <Surface
-            variant="panelAlt"
-            radius="2xl"
-            shadow="tile"
-            className="px-4 py-3 text-sm text-muted"
-          >
-            Delegation becomes available once you are participating in chamber
-            governance.
-          </Surface>
-        )}
-      </CardContent>
-    </Card>
+
+          <div className="glassy-picker-search">
+            <Input
+              className="glassy-picker-search__input"
+              value={pickerSearch}
+              onChange={(event) => setPickerSearch(event.target.value)}
+              placeholder="Search governors by name, address, tier, or focus"
+            />
+          </div>
+
+          {pickerGovernors.length === 0 ? (
+            <div className="glassy-picker-empty">
+              No other governors are available in this chamber.
+            </div>
+          ) : visiblePickerGovernors.length === 0 ? (
+            <div className="glassy-picker-empty">
+              No governors match this search.
+            </div>
+          ) : (
+            <div className="glassy-picker-list">
+              {visiblePickerGovernors.map((governor) => {
+                const isCurrent = addressesReferToSameIdentity(
+                  governor.id,
+                  pickerItem?.delegateeAddress,
+                );
+                const pending =
+                  delegationPendingByChamber[pickerItem?.chamberId ?? ""] ??
+                  false;
+
+                return (
+                  <div className="glassy-picker-row" key={governor.id}>
+                    <div className="glassy-picker-row__main">
+                      <div className="glassy-picker-row__nameLine">
+                        <p className="glassy-picker-row__name">
+                          {governor.name}
+                        </p>
+                        {isCurrent ? (
+                          <GlassyStatusChip tone="primary">
+                            Current
+                          </GlassyStatusChip>
+                        ) : null}
+                      </div>
+                      <AddressInline
+                        address={governor.id}
+                        textClassName="text-sm text-muted"
+                      />
+                      <div className="glassy-picker-row__metrics">
+                        <GlassyKeyValue label="Tier" value={governor.tier} />
+                        <GlassyKeyValue label="MCM" value={governor.mcm} />
+                        <GlassyKeyValue
+                          label="Power"
+                          value={governor.effectiveVotingPower}
+                        />
+                      </div>
+                    </div>
+                    <Button
+                      type="button"
+                      size="compact"
+                      disabled={pending || isCurrent || !pickerItem}
+                      onClick={() => {
+                        if (!pickerItem) return;
+                        onSetDelegation(pickerItem.chamberId, governor.id);
+                        setPickerChamberId(null);
+                      }}
+                    >
+                      Delegate
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </GlassyTile>
+      </Modal>
+    </GlassySection>
   );
 }
diff --git a/src/pages/my-governance/components/MyGovernanceLegitimacyCard.tsx b/src/pages/my-governance/components/MyGovernanceLegitimacyCard.tsx
index 3eb4122..433c668 100644
--- a/src/pages/my-governance/components/MyGovernanceLegitimacyCard.tsx
+++ b/src/pages/my-governance/components/MyGovernanceLegitimacyCard.tsx
@@ -1,12 +1,11 @@
-import { Badge } from "@/components/primitives/badge";
-import { Button } from "@/components/primitives/button";
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
-import { Surface } from "@/components/Surface";
+  GlassyCompactMetric,
+  GlassyCompactRow,
+  GlassyKeyValue,
+  GlassySection,
+  GlassyStatusChip,
+} from "@/components/GlassySection";
+import { Button } from "@/components/primitives/button";
 import type { GetMyGovernanceResponse } from "@/types/api";
 
 type Legitimacy = GetMyGovernanceResponse["legitimacy"];
@@ -25,78 +24,63 @@ export function MyGovernanceLegitimacyCard({
   onToggleLegitimacy,
 }: MyGovernanceLegitimacyCardProps) {
   return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle>System legitimacy</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="grid gap-3 sm:grid-cols-3">
-          {[
-            {
-              label: "Legitimacy",
-              value: `${legitimacy.percent}%`,
-            },
-            {
-              label: "Objectors",
-              value: `${legitimacy.objectingHumanNodes} / ${legitimacy.eligibleHumanNodes}`,
-            },
-            {
-              label: "Referendum trigger",
-              value: `< ${legitimacy.triggerThresholdPercent}%`,
-            },
-          ].map((tile) => (
-            <Surface
-              key={tile.label}
-              variant="panelAlt"
-              radius="2xl"
-              shadow="tile"
-              className="flex h-full flex-col items-center justify-center px-4 py-4 text-center"
-            >
-              <p className="text-sm text-muted">{tile.label}</p>
-              <p className="text-xl font-semibold text-text">{tile.value}</p>
-            </Surface>
-          ))}
-        </div>
-
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className="space-y-3 p-4"
-        >
-          <p className="text-sm text-muted">
-            Any active human node can object to Vortex legitimacy. Each objector
-            reduces legitimacy by their equal share of the active human-node
-            base.
-          </p>
-          <div className="flex flex-wrap items-center gap-3">
-            <Button
-              type="button"
-              variant={legitimacy.objecting ? "outline" : "ghost"}
-              className="border-[var(--danger)] text-[var(--danger)] hover:bg-[var(--danger)] hover:text-white"
-              disabled={legitimacyPending}
-              onClick={onToggleLegitimacy}
-            >
-              {legitimacy.objecting
-                ? "Withdraw illegitimacy objection"
-                : "VORTEX IS ILLEGITIMATE"}
-            </Button>
-            <Badge variant="outline">
-              {legitimacy.objecting
-                ? "You are objecting"
-                : "You are not objecting"}
-            </Badge>
-            {legitimacy.referendumTriggered ? (
-              <Badge variant="outline" className="border-danger/40 text-danger">
-                Referendum threshold reached
-              </Badge>
-            ) : null}
-          </div>
-          {legitimacyError ? (
-            <p className="text-sm text-danger">{legitimacyError}</p>
+    <GlassySection title="System legitimacy">
+      <div className="grid grid-cols-3 gap-2">
+        {[
+          {
+            label: "Legitimacy",
+            value: `${legitimacy.percent}%`,
+          },
+          {
+            label: "Objectors",
+            value: `${legitimacy.objectingHumanNodes} / ${legitimacy.eligibleHumanNodes}`,
+          },
+          {
+            label: "Trigger",
+            value: `< ${legitimacy.triggerThresholdPercent}%`,
+          },
+        ].map((tile) => (
+          <GlassyCompactMetric
+            key={tile.label}
+            label={tile.label}
+            value={tile.value}
+          />
+        ))}
+      </div>
+      <GlassyCompactRow
+        title="Illegitimacy objection"
+        actions={
+          <Button
+            type="button"
+            size="compact"
+            variant={legitimacy.objecting ? "outline" : "ghost"}
+            className="border-[var(--danger)] text-[var(--danger)] hover:bg-[var(--danger)] hover:text-white"
+            disabled={legitimacyPending}
+            onClick={onToggleLegitimacy}
+          >
+            {legitimacy.objecting ? "Withdraw" : "Object"}
+          </Button>
+        }
+      >
+        <div className="flex flex-wrap items-center gap-2">
+          <GlassyStatusChip tone={legitimacy.objecting ? "danger" : "neutral"}>
+            {legitimacy.objecting ? "Objecting" : "Not objecting"}
+          </GlassyStatusChip>
+          <GlassyKeyValue
+            className="glassy-key-value--stacked glassy-key-value--metric"
+            label="Rule"
+            value="1 objector = one active-node share."
+          />
+          {legitimacy.referendumTriggered ? (
+            <GlassyStatusChip tone="danger">
+              Referendum threshold reached
+            </GlassyStatusChip>
           ) : null}
-        </Surface>
-      </CardContent>
-    </Card>
+        </div>
+        {legitimacyError ? (
+          <p className="text-sm text-danger">{legitimacyError}</p>
+        ) : null}
+      </GlassyCompactRow>
+    </GlassySection>
   );
 }
diff --git a/src/pages/my-governance/components/MyGovernanceProgressionCard.tsx b/src/pages/my-governance/components/MyGovernanceProgressionCard.tsx
index a55fbe0..d034c0a 100644
--- a/src/pages/my-governance/components/MyGovernanceProgressionCard.tsx
+++ b/src/pages/my-governance/components/MyGovernanceProgressionCard.tsx
@@ -1,17 +1,13 @@
-import { Check, X } from "lucide-react";
-
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
-import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
+  GlassyMetricTile,
+  GlassyProgressBar,
+  GlassySection,
+  GlassyTile,
+  GlassyTileHeading,
+} from "@/components/GlassySection";
 import {
   getRequirementProgress,
   labelForTier,
-  proposalRightsByTier,
   requirementLabel,
   type TierKey,
 } from "@/lib/myGovernanceUi";
@@ -48,186 +44,64 @@ export const MyGovernanceProgressionCard: React.FC<
       : 100;
 
   return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle>Progression dashboard</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="grid items-center gap-4 lg:grid-cols-[1fr_auto_1fr]">
-          <Surface
-            variant="panelAlt"
-            radius="2xl"
-            shadow="tile"
-            className="p-4 text-center"
-          >
-            <Kicker align="center">Current tier</Kicker>
-            <p className="text-lg font-semibold text-text">
-              {labelForTier(currentTier)}
-            </p>
-          </Surface>
-          <div className="flex flex-col items-center justify-center gap-3 px-2">
-            <Kicker align="center">Progress</Kicker>
-            <div className="relative h-2 w-48 overflow-hidden rounded-full bg-muted/30">
-              <div
-                className="h-full rounded-full bg-primary"
-                style={{ width: `${overallPercent}%` }}
-              />
+    <GlassySection title="Tier progress">
+      <div className="space-y-4">
+        <div className="grid items-stretch gap-3 sm:grid-cols-2 xl:grid-cols-[1fr_1fr_1.2fr]">
+          <GlassyMetricTile
+            label="Current tier"
+            value={labelForTier(currentTier)}
+          />
+          <GlassyMetricTile
+            label="Next tier"
+            value={nextTier ? labelForTier(nextTier) : "-"}
+          />
+          <GlassyTile className="flex flex-col justify-center gap-3 px-4 py-4 sm:col-span-2 xl:col-span-1">
+            <div className="flex items-center justify-between gap-3">
+              <GlassyTileHeading>Progress</GlassyTileHeading>
+              <p className="text-sm font-medium text-text">
+                {nextTier ? `${overallPercent}%` : "Max"}
+              </p>
             </div>
-            <p className="text-sm font-semibold text-text">
+            <GlassyProgressBar value={overallPercent} />
+            <p className="text-xs text-muted">
               {nextTier
-                ? `${overallPercent}% to ${labelForTier(nextTier)}`
-                : "Max tier reached"}
-            </p>
-          </div>
-          <Surface
-            variant="panelAlt"
-            radius="2xl"
-            shadow="tile"
-            className="p-4 text-center"
-          >
-            <Kicker align="center">Next tier</Kicker>
-            <p className="text-lg font-semibold text-text">
-              {nextTier ? labelForTier(nextTier) : "-"}
+                ? `Toward ${labelForTier(nextTier)}`
+                : "Highest available tier reached"}
             </p>
-          </Surface>
+          </GlassyTile>
         </div>
         {requirements && requirementKeys.length > 0 ? (
           <div className="grid gap-3 md:grid-cols-2">
-            <Surface
-              variant="panelAlt"
-              radius="2xl"
-              shadow="tile"
-              className="p-4"
-            >
-              <Kicker>Requirements progress</Kicker>
-              <div className="mt-3 space-y-4">
-                {requirementKeys.map((key) => {
-                  const progress = getRequirementProgress(
-                    key,
-                    metrics,
-                    requirements,
-                  );
-                  return (
-                    <div key={key} className="space-y-2">
-                      <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
-                        <p className="text-sm font-semibold text-text">
-                          {requirementLabel[key]}
-                        </p>
-                        <p className="text-sm text-muted">
-                          {progress.done} / {progress.required}
-                        </p>
-                      </div>
-                      <div className="h-2 w-full overflow-hidden rounded-full bg-muted/30">
-                        <div
-                          className="h-full rounded-full bg-primary"
-                          style={{ width: `${progress.percent}%` }}
-                        />
-                      </div>
-                      <p className="text-xs font-semibold text-text">
-                        {progress.percent}%
-                      </p>
-                    </div>
-                  );
-                })}
-              </div>
-            </Surface>
-
-            <Surface
-              variant="panelAlt"
-              radius="2xl"
-              shadow="tile"
-              className="p-4"
-            >
-              <Kicker>Eligibility checklist</Kicker>
-              <div className="mt-3 divide-y divide-border/60 rounded-xl border border-border/60 bg-panel/40">
-                {requirementKeys.map((key) => {
-                  const progress = getRequirementProgress(
-                    key,
-                    metrics,
-                    requirements,
-                  );
-                  const ok =
-                    progress.required === 0 ||
-                    progress.done >= progress.required;
-                  return (
-                    <div
-                      key={key}
-                      className="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
-                    >
-                      <p className="text-sm leading-snug font-semibold text-text">
-                        {requirementLabel[key]}
-                      </p>
-                      <span
-                        className={
-                          ok
-                            ? "inline-flex items-center gap-1.5 rounded-full border border-ok/30 bg-ok/15 px-2.5 py-1 text-xs font-semibold text-ok"
-                            : "inline-flex items-center gap-1.5 rounded-full border border-danger/30 bg-danger/12 px-2.5 py-1 text-xs font-semibold text-danger"
-                        }
-                      >
-                        {ok ? (
-                          <Check
-                            className="h-3.5 w-3.5 text-ok"
-                            aria-hidden="true"
-                          />
-                        ) : (
-                          <X
-                            className="h-3.5 w-3.5 text-danger"
-                            aria-hidden="true"
-                          />
-                        )}
-                        {ok ? "Done" : "Missing"}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-            </Surface>
+            {requirementKeys.map((key) => {
+              const progress = getRequirementProgress(
+                key,
+                metrics,
+                requirements,
+              );
+              return (
+                <GlassyTile key={key} className="grid min-h-28 gap-2 px-3 py-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <GlassyTileHeading>
+                      {requirementLabel[key]}
+                    </GlassyTileHeading>
+                    <p className="text-sm font-medium text-text">
+                      {progress.done} / {progress.required}
+                    </p>
+                  </div>
+                  <GlassyProgressBar value={progress.percent} />
+                  <p className="text-xs text-muted">
+                    {progress.percent}% complete
+                  </p>
+                </GlassyTile>
+              );
+            })}
           </div>
         ) : (
-          <Surface
-            variant="panelAlt"
-            radius="2xl"
-            shadow="tile"
-            className="p-4 text-sm text-muted"
-          >
+          <GlassyTile className="text-sm text-muted">
             You have reached the highest available tier.
-          </Surface>
+          </GlassyTile>
         )}
-        <div className="grid gap-3 md:grid-cols-2">
-          <Surface
-            variant="panelAlt"
-            radius="2xl"
-            shadow="tile"
-            className="p-4"
-          >
-            <p className="text-sm font-semibold text-text">
-              Proposals available with {labelForTier(currentTier)}
-            </p>
-            <ul className="mt-2 list-disc space-y-1 pl-4 text-xs text-muted">
-              {proposalRightsByTier[currentTier].map((item) => (
-                <li key={item}>{item}</li>
-              ))}
-            </ul>
-          </Surface>
-          {nextTier ? (
-            <Surface
-              variant="panelAlt"
-              radius="2xl"
-              shadow="tile"
-              className="p-4"
-            >
-              <p className="text-sm font-semibold text-text">
-                Proposals unlocked at {labelForTier(nextTier)}
-              </p>
-              <ul className="mt-2 list-disc space-y-1 pl-4 text-xs text-muted">
-                {proposalRightsByTier[nextTier].map((item) => (
-                  <li key={item}>{item}</li>
-                ))}
-              </ul>
-            </Surface>
-          ) : null}
-        </div>
-      </CardContent>
-    </Card>
+      </div>
+    </GlassySection>
   );
 };
diff --git a/src/pages/my-governance/components/MyGovernanceThresholdCard.tsx b/src/pages/my-governance/components/MyGovernanceThresholdCard.tsx
index 9afeb27..ea16430 100644
--- a/src/pages/my-governance/components/MyGovernanceThresholdCard.tsx
+++ b/src/pages/my-governance/components/MyGovernanceThresholdCard.tsx
@@ -1,12 +1,11 @@
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
+  GlassyMetricTile,
+  GlassySection,
+  GlassyTile,
+  GlassyTileHeading,
+} from "@/components/GlassySection";
 import { HintLabel } from "@/components/Hint";
 import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
 import type { GoverningStatus } from "@/lib/myGovernanceUi";
 import type { GetMyGovernanceResponse } from "@/types/api";
 
@@ -19,51 +18,46 @@ type MyGovernanceThresholdCardProps = {
   timeLeftValue: string;
 };
 
+const masterEraActionLabels = ["Pool votes", "Chamber votes"] as const;
+
+function formatEraActionLabel(label: string, index: number): string {
+  const baseLabel =
+    masterEraActionLabels[index] ?? label.replace(/\s+this era$/i, "").trim();
+  return `${baseLabel} this era`;
+}
+
 export function MyGovernanceThresholdCard({
   eraActivity,
   status,
   timeLeftValue,
 }: MyGovernanceThresholdCardProps) {
   return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle>
-          <HintLabel termId="governing_threshold">
-            Governing threshold
-          </HintLabel>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className="px-4 py-3 text-sm text-muted"
-        >
+    <GlassySection
+      title={
+        <HintLabel termId="governing_threshold">Governing threshold</HintLabel>
+      }
+    >
+      <div className="space-y-4">
+        <GlassyTile className="px-4 py-3 text-sm text-muted">
           This tracks opportunities that occurred during the current era, even
           if those votes are already closed.
-        </Surface>
+        </GlassyTile>
         <div className="grid gap-3 sm:grid-cols-2">
           {[
             { label: "Era", value: eraActivity?.era ?? "—" },
             { label: "Time left", value: timeLeftValue },
           ].map((tile) => (
-            <Surface
+            <GlassyMetricTile
               key={tile.label}
-              variant="panelAlt"
-              radius="2xl"
-              shadow="tile"
-              className="flex h-full flex-col items-center justify-center px-4 py-4 text-center"
-            >
-              <p className="text-sm text-muted">
-                {tile.label === "Era" ? (
+              label={
+                tile.label === "Era" ? (
                   <HintLabel termId="governing_era">{tile.label}</HintLabel>
                 ) : (
                   tile.label
-                )}
-              </p>
-              <p className="text-xl font-semibold text-text">{tile.value}</p>
-            </Surface>
+                )
+              }
+              value={tile.value}
+            />
           ))}
         </div>
         <div className="grid gap-3 sm:grid-cols-2">
@@ -87,37 +81,29 @@ export function MyGovernanceThresholdCard({
               ),
             },
           ].map((tile) => (
-            <Surface
+            <GlassyMetricTile
               key={tile.key}
-              variant="panelAlt"
-              radius="2xl"
-              shadow="tile"
-              className="flex h-full flex-col items-center justify-center px-4 py-4 text-center"
-            >
-              <p className="text-sm text-muted">{tile.label}</p>
-              <p className="text-xl font-semibold text-text">{tile.value}</p>
-            </Surface>
+              label={tile.label}
+              value={tile.value}
+            />
           ))}
         </div>
         <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
-          {(eraActivity?.actions ?? []).map((act) => (
-            <Surface
+          {(eraActivity?.actions ?? []).map((act, index) => (
+            <GlassyTile
               key={act.label}
-              variant="panelAlt"
-              radius="xl"
-              shadow="tile"
               className="flex h-full flex-col items-center justify-center px-3 py-3 text-center"
             >
               <Kicker align="center" className="text-[0.7rem]">
-                {act.label} this era
+                {formatEraActionLabel(act.label, index)}
               </Kicker>
-              <p className="text-base font-semibold text-text">
+              <GlassyTileHeading>
                 {act.done} / {act.required}
-              </p>
-            </Surface>
+              </GlassyTileHeading>
+            </GlassyTile>
           ))}
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </GlassySection>
   );
 }
diff --git a/src/pages/my-governance/components/MyGovernanceVetoProcessCard.tsx b/src/pages/my-governance/components/MyGovernanceVetoProcessCard.tsx
deleted file mode 100644
index afe643a..0000000
--- a/src/pages/my-governance/components/MyGovernanceVetoProcessCard.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/primitives/card";
-import { Surface } from "@/components/Surface";
-
-export function MyGovernanceVetoProcessCard() {
-  return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle>Veto process</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className="px-4 py-3 text-sm text-muted"
-        >
-          Veto happens on the chamber vote page itself. Citizens and chambers
-          can cast veto votes during the chamber vote window, and if the
-          ordinary vote passes, a 24h veto countdown remains open on that same
-          page.
-        </Surface>
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className="px-4 py-3 text-sm text-muted"
-        >
-          If a veto succeeds, the proposal returns to reconsideration draft and
-          the proposer can resubmit it directly into chamber vote without going
-          through proposal pool again.
-        </Surface>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/pages/my-governance/hooks/useMyGovernancePageData.ts b/src/pages/my-governance/hooks/useMyGovernancePageData.ts
index 893a0d2..01872d9 100644
--- a/src/pages/my-governance/hooks/useMyGovernancePageData.ts
+++ b/src/pages/my-governance/hooks/useMyGovernancePageData.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 
 import {
+  apiChamber,
   apiChambers,
   apiClock,
   apiCmMe,
@@ -8,63 +9,75 @@ import {
 } from "@/lib/apiClient";
 import type {
   ChamberDto,
+  ChamberGovernorDto,
   CmSummaryDto,
+  DelegationGovernanceItemDto,
   GetClockResponse,
   GetMyGovernanceResponse,
 } from "@/types/api";
 
+type DelegationGovernorMap = Record<string, ChamberGovernorDto[]>;
+
+async function loadDelegationGovernorMap(
+  delegationChambers: DelegationGovernanceItemDto[],
+): Promise<DelegationGovernorMap> {
+  const results = await Promise.allSettled(
+    delegationChambers.map(async (item) => ({
+      chamberId: item.chamberId,
+      detail: await apiChamber(item.chamberId),
+    })),
+  );
+
+  const next: DelegationGovernorMap = {};
+  for (const result of results) {
+    if (result.status === "fulfilled") {
+      next[result.value.chamberId] = result.value.detail.governors;
+    }
+  }
+  return next;
+}
+
 export function useMyGovernancePageData() {
   const [gov, setGov] = useState<GetMyGovernanceResponse | null>(null);
   const [chambers, setChambers] = useState<ChamberDto[] | null>(null);
+  const [delegationGovernorsByChamber, setDelegationGovernorsByChamber] =
+    useState<DelegationGovernorMap>({});
   const [clock, setClock] = useState<GetClockResponse | null>(null);
   const [cmSummary, setCmSummary] = useState<CmSummaryDto | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
-  const [delegationDrafts, setDelegationDrafts] = useState<
-    Record<string, string>
-  >({});
-
-  const syncDelegationDrafts = useCallback(
-    (nextGov: GetMyGovernanceResponse, options: { fillOnly: boolean }) => {
-      setDelegationDrafts((current) => {
-        const next = { ...current };
-        for (const item of nextGov.delegation.chambers) {
-          if (!options.fillOnly || next[item.chamberId] === undefined) {
-            next[item.chamberId] = item.delegateeAddress ?? "";
-          }
-        }
-        return next;
-      });
-    },
-    [],
-  );
 
   const refreshGovernance = useCallback(async () => {
     const fresh = await apiMyGovernance();
+    const governorMap = await loadDelegationGovernorMap(
+      fresh.delegation.chambers,
+    );
     setGov(fresh);
-    syncDelegationDrafts(fresh, { fillOnly: false });
-  }, [syncDelegationDrafts]);
+    setDelegationGovernorsByChamber(governorMap);
+  }, []);
 
   useEffect(() => {
     let active = true;
     (async () => {
       try {
-        const [govRes, chambersRes, clockRes] = await Promise.all([
-          apiMyGovernance(),
+        const govRes = await apiMyGovernance();
+        const [chambersRes, clockRes, cmRes, governorMap] = await Promise.all([
           apiChambers(),
           apiClock().catch(() => null),
+          apiCmMe().catch(() => null),
+          loadDelegationGovernorMap(govRes.delegation.chambers),
         ]);
-        const cmRes = await apiCmMe().catch(() => null);
         if (!active) return;
         setGov(govRes);
         setChambers(chambersRes.items);
+        setDelegationGovernorsByChamber(governorMap);
         setClock(clockRes);
         setCmSummary(cmRes);
-        syncDelegationDrafts(govRes, { fillOnly: true });
         setLoadError(null);
       } catch (error) {
         if (!active) return;
         setGov(null);
         setChambers(null);
+        setDelegationGovernorsByChamber({});
         setClock(null);
         setCmSummary(null);
         setLoadError((error as Error).message);
@@ -73,26 +86,15 @@ export function useMyGovernancePageData() {
     return () => {
       active = false;
     };
-  }, [syncDelegationDrafts]);
-
-  const updateDelegationDraft = useCallback(
-    (chamberId: string, value: string) => {
-      setDelegationDrafts((current) => ({
-        ...current,
-        [chamberId]: value,
-      }));
-    },
-    [],
-  );
+  }, []);
 
   return {
     chambers,
     clock,
     cmSummary,
-    delegationDrafts,
+    delegationGovernorsByChamber,
     gov,
     loadError,
     refreshGovernance,
-    updateDelegationDraft,
   };
 }
diff --git a/src/pages/profile/Profile.css b/src/pages/profile/Profile.css
new file mode 100644
index 0000000..1d2b23d
--- /dev/null
+++ b/src/pages/profile/Profile.css
@@ -0,0 +1,96 @@
+.profile-activity-controls {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.profile-activity-controls::-webkit-scrollbar {
+  display: none;
+}
+
+.profile-activity-controls__filters {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  width: max-content;
+}
+
+.profile-activity-controls__filters button {
+  min-width: 0;
+  padding-inline: 0.72rem;
+  font-size: 0.76rem;
+  white-space: nowrap;
+}
+
+.profile-activity-controls__history {
+  flex: 0 0 auto;
+}
+
+.profile-activity-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.72rem 0.78rem;
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease,
+    background-color 180ms ease;
+}
+
+.profile-activity-row:hover {
+  transform: translateY(-1px);
+}
+
+.profile-activity-row__action {
+  min-width: 4.75rem;
+}
+
+.profile-activity-row__copy {
+  min-width: 0;
+  display: grid;
+  gap: 0.14rem;
+}
+
+.profile-activity-row__title,
+.profile-activity-row__context,
+.profile-activity-row__detail {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-activity-row__title {
+  color: var(--text);
+  font-size: 0.88rem;
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.profile-activity-row__context,
+.profile-activity-row__detail {
+  color: var(--muted);
+  font-size: 0.76rem;
+  line-height: 1.25;
+}
+
+.profile-activity-row__time {
+  min-width: 5.35rem;
+}
+
+@media (max-width: 760px) {
+  .profile-activity-row {
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .profile-activity-row__action,
+  .profile-activity-row__time {
+    justify-self: start;
+    min-width: 0;
+  }
+}
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index e37dd4f..caedb4e 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -1,15 +1,17 @@
 import { useEffect, useState } from "react";
 import { Card } from "@/components/primitives/card";
 import { HintLabel } from "@/components/Hint";
-import { Surface } from "@/components/Surface";
 import { PageHint } from "@/components/PageHint";
-import { SectionHeader } from "@/components/SectionHeader";
 import { apiHuman } from "@/lib/apiClient";
 import type { HumanNodeProfileDto, ProofKeyDto } from "@/types/api";
 import { useAuth } from "@/app/auth/AuthContext";
 import { buildTierRequirementItems } from "@/lib/tierProgress";
 import { formatLoadError } from "@/lib/errorFormatting";
 import { CmEconomyPanel } from "@/components/CmEconomyPanel";
+import {
+  getHumanNodeCmTotals,
+  getHumanNodeVisibleHeroStats,
+} from "@/lib/humanNodesUi";
 import {
   PROOF_META,
   type ActivityFilter,
@@ -17,11 +19,15 @@ import {
   shortAddress,
   shouldShowDetail,
 } from "@/lib/profileUi";
-import { ProfileActivityProjectsSection } from "./components/ProfileActivityProjectsSection";
+import {
+  ProfileFormationProjectsSection,
+  ProfileGovernanceActivitySection,
+} from "./components/ProfileActivityProjectsSection";
 import { ProfileDelegationSection } from "./components/ProfileDelegationSection";
 import { ProfileDetailsProofsSection } from "./components/ProfileDetailsProofsSection";
 import { ProfileHero } from "./components/ProfileHero";
 import { ProfileTierProgressSection } from "./components/ProfileTierProgressSection";
+import "./Profile.css";
 
 type ProfileProps = {
   showHint?: boolean;
@@ -102,21 +108,10 @@ const Profile: React.FC<ProfileProps> = ({ showHint = true }) => {
   const requirementItems = buildTierRequirementItems(tierProgress);
   const cmHistory = profile?.cmHistory ?? [];
   const cmChambers = profile?.cmChambers ?? [];
-  const cmTotals = (profile?.heroStats ?? []).reduce(
-    (acc, stat) => {
-      const label = stat.label.trim().toUpperCase();
-      const numeric = Number(stat.value.replace(/[^0-9.-]/g, "")) || 0;
-      if (label === "LCM") acc.lcm = numeric;
-      if (label === "MCM") acc.mcm = numeric;
-      if (label === "ACM") acc.acm = numeric;
-      return acc;
-    },
-    { lcm: 0, mcm: 0, acm: 0 },
-  );
-  const visibleHeroStats = (profile?.heroStats ?? []).filter((stat) => {
-    const label = stat.label.trim().toUpperCase();
-    return !["ACM", "LCM", "MCM", "MM"].includes(label);
-  });
+  const cmTotals = getHumanNodeCmTotals(profile?.heroStats ?? []);
+  const visibleHeroStats = getHumanNodeVisibleHeroStats(
+    profile?.heroStats ?? [],
+  ).filter((stat) => stat.label.trim().toUpperCase() !== "ACM");
   const visibleDetails = (profile?.quickDetails ?? []).filter((detail) =>
     shouldShowDetail(detail.label),
   );
@@ -196,48 +191,41 @@ const Profile: React.FC<ProfileProps> = ({ showHint = true }) => {
         visibleDetails={visibleDetails}
       />
 
-      <CmEconomyPanel
-        totals={cmTotals}
-        chambers={cmChambers}
-        history={cmHistory}
-        mmValue="—"
-      />
+      <div className="grid items-stretch gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(22rem,1fr)]">
+        <ProfileFormationProjectsSection
+          className="h-full"
+          projects={profile?.projects ?? []}
+        />
 
-      <ProfileDelegationSection delegationChambers={delegationChambers} />
+        <ProfileTierProgressSection
+          className="h-full"
+          requirementItems={requirementItems}
+          tierProgress={tierProgress}
+        />
+      </div>
 
-      <div className="grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
-        <ProfileActivityProjectsSection
+      <div className="grid items-stretch gap-4 xl:grid-cols-3">
+        <CmEconomyPanel
+          className="h-full"
+          totals={cmTotals}
+          chambers={cmChambers}
+          history={cmHistory}
+          mmValue={cmTotals.acm}
+          totalsScope="personal"
+        />
+
+        <ProfileDelegationSection
+          className="h-full"
+          delegationChambers={delegationChambers}
+        />
+
+        <ProfileGovernanceActivitySection
+          className="h-full"
           activityFilter={activityFilter}
           filteredActions={filteredActions}
           historyHref={historyHref}
           onActivityFilterChange={setActivityFilter}
-          projects={profile?.projects ?? []}
         />
-
-        <div className="flex flex-col gap-4">
-          <ProfileTierProgressSection
-            requirementItems={requirementItems}
-            tierProgress={tierProgress}
-          />
-          <section className="space-y-3">
-            <SectionHeader>History</SectionHeader>
-            {(profile?.history ?? []).length ? (
-              (profile?.history ?? []).map((entry) => (
-                <Surface
-                  key={entry}
-                  variant="panelAlt"
-                  radius="xl"
-                  shadow="tile"
-                  className="px-3 py-2 text-center text-sm text-text"
-                >
-                  {entry}
-                </Surface>
-              ))
-            ) : (
-              <p className="text-sm text-muted">No history yet.</p>
-            )}
-          </section>
-        </div>
       </div>
     </div>
   );
diff --git a/src/pages/profile/components/ProfileActivityProjectsSection.tsx b/src/pages/profile/components/ProfileActivityProjectsSection.tsx
index 51870f2..4ae97cb 100644
--- a/src/pages/profile/components/ProfileActivityProjectsSection.tsx
+++ b/src/pages/profile/components/ProfileActivityProjectsSection.tsx
@@ -1,106 +1,141 @@
 import { Link } from "react-router";
 
-import { ActivityTile } from "@/components/ActivityTile";
-import { SectionHeader } from "@/components/SectionHeader";
-import { Badge } from "@/components/primitives/badge";
-import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
+import { Button } from "@/components/primitives/button";
+import {
+  GlassySection,
+  GlassyStatusChip,
+  GlassyTile,
+} from "@/components/GlassySection";
 import { ToggleGroup } from "@/components/ToggleGroup";
-import { ACTIVITY_FILTERS, type ActivityFilter } from "@/lib/profileUi";
+import {
+  ACTIVITY_FILTERS,
+  type ActivityFilter,
+  formatActivityTimestamp,
+} from "@/lib/profileUi";
+import {
+  FormationProjectCard,
+  formationProjectCardFromProfileProject,
+} from "@/pages/formation/components/FormationProjectCard";
 import type { HumanNodeProfileDto } from "@/types/api";
 
 type GovernanceAction = HumanNodeProfileDto["governanceActions"][number];
 type FormationProject = HumanNodeProfileDto["projects"][number];
 
-type ProfileActivityProjectsSectionProps = {
+type ProfileGovernanceActivitySectionProps = {
   activityFilter: ActivityFilter;
+  className?: string;
   filteredActions: GovernanceAction[];
   historyHref: string | null;
   onActivityFilterChange: (filter: ActivityFilter) => void;
+};
+
+type ProfileFormationProjectsSectionProps = {
+  className?: string;
   projects: FormationProject[];
 };
 
-export function ProfileActivityProjectsSection({
+export function ProfileGovernanceActivitySection({
   activityFilter,
+  className,
   filteredActions,
   historyHref,
   onActivityFilterChange,
-  projects,
-}: ProfileActivityProjectsSectionProps) {
+}: ProfileGovernanceActivitySectionProps) {
+  const filterOptions = ACTIVITY_FILTERS.map((opt) => ({
+    value: opt.value,
+    label: opt.label,
+  }));
+
   return (
-    <div className="flex flex-col gap-4">
-      <div className="space-y-3">
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <SectionHeader>Governance activity</SectionHeader>
-          {historyHref ? (
-            <Link
-              to={historyHref}
-              className="text-sm font-semibold text-primary hover:underline sm:self-auto"
-            >
-              View full history
-            </Link>
-          ) : null}
-        </div>
+    <GlassySection className={className} title="Governance activity">
+      <div className="profile-activity-controls">
         <ToggleGroup
           value={activityFilter}
           onValueChange={(val) =>
             onActivityFilterChange((val as ActivityFilter) || "all")
           }
-          options={ACTIVITY_FILTERS.map((opt) => ({
-            value: opt.value,
-            label: opt.label,
-          }))}
+          options={filterOptions}
+          className="profile-activity-controls__filters"
         />
-        {filteredActions.length ? (
-          <div className="grid max-h-none grid-cols-1 gap-3 overflow-visible pr-0 sm:grid-cols-2 lg:max-h-72 lg:overflow-y-auto lg:pr-2 xl:grid-cols-3">
-            {filteredActions.map((action) => (
-              <ActivityTile
-                key={`${action.title}-${action.timestamp}`}
-                action={action}
-              />
-            ))}
-          </div>
-        ) : (
-          <p className="text-sm text-muted">No activity to show yet.</p>
-        )}
+        {historyHref ? (
+          <Button
+            asChild
+            className="profile-activity-controls__history"
+            size="compact"
+            variant="outline"
+          >
+            <Link to={historyHref}>Full History</Link>
+          </Button>
+        ) : null}
       </div>
-
-      <div className="space-y-3">
-        <SectionHeader>Formation projects</SectionHeader>
-        {projects.length ? (
-          <div className="space-y-3">
-            {projects.map((project) => (
-              <Surface
-                key={project.title}
-                variant="panelAlt"
-                radius="xl"
-                className="px-4 py-3"
-              >
-                <div className="flex flex-col gap-1 text-center">
-                  <p className="text-sm font-semibold text-text">
-                    {project.title}
+      {filteredActions.length ? (
+        <div className="grid gap-2">
+          {filteredActions.map((action) => {
+            const row = (
+              <GlassyTile className="profile-activity-row">
+                <GlassyStatusChip
+                  className="profile-activity-row__action"
+                  tone="primary"
+                >
+                  {action.action}
+                </GlassyStatusChip>
+                <div className="profile-activity-row__copy">
+                  <p className="profile-activity-row__title">{action.title}</p>
+                  <p className="profile-activity-row__context">
+                    {action.context}
+                  </p>
+                  <p className="profile-activity-row__detail">
+                    {action.detail}
                   </p>
-                  <Kicker align="center">{project.status}</Kicker>
-                </div>
-                <p className="text-center text-sm text-muted">
-                  {project.summary}
-                </p>
-                <div className="flex flex-wrap justify-center gap-2 pt-2">
-                  {project.chips.map((chip) => (
-                    <Badge key={chip} variant="outline">
-                      {chip}
-                    </Badge>
-                  ))}
                 </div>
-              </Surface>
-            ))}
-          </div>
-        ) : (
-          <p className="text-sm text-muted">
-            Not participating in Formation right now.
-          </p>
-        )}
-      </div>
-    </div>
+                <GlassyStatusChip className="profile-activity-row__time">
+                  {formatActivityTimestamp(action.timestamp)}
+                </GlassyStatusChip>
+              </GlassyTile>
+            );
+
+            return action.href ? (
+              <Link
+                key={`${action.title}-${action.timestamp}`}
+                to={action.href}
+                className="block"
+              >
+                {row}
+              </Link>
+            ) : (
+              <div key={`${action.title}-${action.timestamp}`}>{row}</div>
+            );
+          })}
+        </div>
+      ) : (
+        <GlassyTile className="text-sm text-muted">
+          No activity to show yet.
+        </GlassyTile>
+      )}
+    </GlassySection>
+  );
+}
+
+export function ProfileFormationProjectsSection({
+  className,
+  projects,
+}: ProfileFormationProjectsSectionProps) {
+  return (
+    <GlassySection className={className} title="Formation projects">
+      {projects.length ? (
+        <div className="formation-project-grid formation-project-grid--pair">
+          {projects.map((project) => (
+            <FormationProjectCard
+              key={project.title}
+              project={formationProjectCardFromProfileProject(project)}
+            />
+          ))}
+        </div>
+      ) : (
+        <GlassyTile className="text-sm text-muted">
+          Not participating in Formation right now.
+        </GlassyTile>
+      )}
+    </GlassySection>
   );
 }
diff --git a/src/pages/profile/components/ProfileDelegationSection.tsx b/src/pages/profile/components/ProfileDelegationSection.tsx
index 31c62a2..44248fc 100644
--- a/src/pages/profile/components/ProfileDelegationSection.tsx
+++ b/src/pages/profile/components/ProfileDelegationSection.tsx
@@ -1,8 +1,12 @@
 import { AddressInline } from "@/components/AddressInline";
-import { SectionHeader } from "@/components/SectionHeader";
-import { Badge } from "@/components/primitives/badge";
-import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
+import {
+  GlassyCompactGrid,
+  GlassyCompactRow,
+  GlassyKeyValue,
+  GlassySection,
+  GlassyStatusChip,
+  GlassyTile,
+} from "@/components/GlassySection";
 import { formatChamberLabel } from "@/lib/chamberUi";
 import { shortAddress } from "@/lib/profileUi";
 import type { HumanNodeProfileDto } from "@/types/api";
@@ -10,62 +14,64 @@ import type { HumanNodeProfileDto } from "@/types/api";
 type DelegationChamber = HumanNodeProfileDto["delegation"]["chambers"][number];
 
 type ProfileDelegationSectionProps = {
+  className?: string;
   delegationChambers: DelegationChamber[];
 };
 
 export function ProfileDelegationSection({
+  className,
   delegationChambers,
 }: ProfileDelegationSectionProps) {
-  if (delegationChambers.length === 0) {
-    return null;
-  }
-
   return (
-    <section className="space-y-4">
-      <SectionHeader>Delegation</SectionHeader>
-      <div className="grid gap-4 md:grid-cols-2">
-        {delegationChambers.map((item) => (
-          <Surface
-            key={item.chamberId}
-            variant="panelAlt"
-            radius="xl"
-            shadow="tile"
-            className="space-y-3 px-4 py-4"
-          >
-            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-              <Kicker>{formatChamberLabel(item.chamberId)}</Kicker>
-              <Badge variant="outline">Inbound {item.inboundWeight}</Badge>
-            </div>
-            <div className="space-y-1">
-              <p className="text-xs font-semibold tracking-wide text-muted uppercase">
-                Current delegate
-              </p>
-              {item.delegateeAddress ? (
-                <AddressInline
-                  address={item.delegateeAddress}
-                  textClassName="text-sm text-text"
-                />
-              ) : (
-                <p className="text-sm text-text">No delegate set</p>
-              )}
-            </div>
-            {item.inboundDelegators.length > 0 ? (
-              <div className="space-y-1">
-                <p className="text-xs font-semibold tracking-wide text-muted uppercase">
-                  Delegated by
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  {item.inboundDelegators.map((delegator) => (
-                    <Badge key={delegator} variant="muted">
-                      {shortAddress(delegator)}
-                    </Badge>
-                  ))}
+    <GlassySection className={className} title="Delegation">
+      {delegationChambers.length === 0 ? (
+        <GlassyTile className="px-4 py-3 text-sm text-muted">
+          No delegation records yet.
+        </GlassyTile>
+      ) : (
+        <GlassyCompactGrid className="h-full content-start">
+          {delegationChambers.map((item) => (
+            <GlassyCompactRow
+              key={item.chamberId}
+              title={formatChamberLabel(item.chamberId)}
+            >
+              <div className="grid gap-2.5">
+                <div className="glassy-compact-address">
+                  {item.delegateeAddress ? (
+                    <AddressInline
+                      address={item.delegateeAddress}
+                      textClassName="text-sm text-muted"
+                    />
+                  ) : (
+                    <p className="text-sm text-muted">No delegate set</p>
+                  )}
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <GlassyKeyValue
+                    className="glassy-key-value--stacked glassy-key-value--metric"
+                    label="Inbound"
+                    value={item.inboundWeight}
+                  />
+                  <GlassyKeyValue
+                    className="glassy-key-value--stacked glassy-key-value--metric"
+                    label="State"
+                    value={item.delegateeAddress ? "Delegating" : "Open"}
+                  />
                 </div>
+                {item.inboundDelegators.length > 0 ? (
+                  <div className="flex flex-wrap gap-2">
+                    {item.inboundDelegators.map((delegator) => (
+                      <GlassyStatusChip key={delegator}>
+                        {shortAddress(delegator)}
+                      </GlassyStatusChip>
+                    ))}
+                  </div>
+                ) : null}
               </div>
-            ) : null}
-          </Surface>
-        ))}
-      </div>
-    </section>
+            </GlassyCompactRow>
+          ))}
+        </GlassyCompactGrid>
+      )}
+    </GlassySection>
   );
 }
diff --git a/src/pages/profile/components/ProfileTierProgressSection.tsx b/src/pages/profile/components/ProfileTierProgressSection.tsx
index c545ec3..9f4ad58 100644
--- a/src/pages/profile/components/ProfileTierProgressSection.tsx
+++ b/src/pages/profile/components/ProfileTierProgressSection.tsx
@@ -1,16 +1,22 @@
-import { SectionHeader } from "@/components/SectionHeader";
-import { Kicker } from "@/components/Kicker";
-import { Surface } from "@/components/Surface";
 import { TierLabel } from "@/components/TierLabel";
+import {
+  GlassyMetricTile,
+  GlassyProgressBar,
+  GlassySection,
+  GlassyTile,
+  GlassyTileHeading,
+} from "@/components/GlassySection";
 import type { TierRequirementItem } from "@/lib/tierProgress";
 import type { TierProgressDto } from "@/types/api";
 
 type ProfileTierProgressSectionProps = {
+  className?: string;
   requirementItems: TierRequirementItem[];
   tierProgress: TierProgressDto | null;
 };
 
 export function ProfileTierProgressSection({
+  className,
   requirementItems,
   tierProgress,
 }: ProfileTierProgressSectionProps) {
@@ -19,59 +25,46 @@ export function ProfileTierProgressSection({
   }
 
   return (
-    <section className="space-y-3">
-      <SectionHeader>Tier progress</SectionHeader>
+    <GlassySection className={className} title="Tier progress">
       <div className="grid gap-3 sm:grid-cols-2">
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className="flex h-full flex-col items-center justify-center px-4 py-4 text-center"
-        >
-          <Kicker align="center">Current tier</Kicker>
-          <p className="text-xl font-semibold text-text">
-            <TierLabel tier={tierProgress.tier} />
-          </p>
-        </Surface>
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className="flex h-full flex-col items-center justify-center px-4 py-4 text-center"
-        >
-          <Kicker align="center">Next tier</Kicker>
-          <p className="text-xl font-semibold text-text">
-            {tierProgress.nextTier ? (
+        <GlassyMetricTile
+          label="Current tier"
+          value={<TierLabel tier={tierProgress.tier} />}
+        />
+        <GlassyMetricTile
+          label="Next tier"
+          value={
+            tierProgress.nextTier ? (
               <TierLabel tier={tierProgress.nextTier} />
             ) : (
               "Max tier"
-            )}
-          </p>
-        </Surface>
+            )
+          }
+        />
       </div>
       {requirementItems.length > 0 ? (
-        <div className="grid gap-3 text-center sm:grid-cols-2">
+        <div className="grid gap-3 sm:grid-cols-2">
           {requirementItems.map((item) => (
-            <Surface
+            <GlassyTile
               key={item.key}
-              variant="panelAlt"
-              radius="xl"
-              shadow="tile"
-              className="flex h-24 flex-col items-center justify-between px-3 py-3"
+              className="grid min-h-28 gap-2 px-3 py-3"
             >
-              <Kicker align="center">{item.label}</Kicker>
-              <p className="text-lg font-semibold text-text">
-                {item.done} / {item.required}
-              </p>
+              <div className="flex items-center justify-between gap-3">
+                <GlassyTileHeading>{item.label}</GlassyTileHeading>
+                <p className="text-sm font-semibold text-text">
+                  {item.done} / {item.required}
+                </p>
+              </div>
+              <GlassyProgressBar value={item.percent} />
               <p className="text-xs text-muted">{item.percent}% complete</p>
-            </Surface>
+            </GlassyTile>
           ))}
         </div>
       ) : (
-        <p className="text-sm text-muted">
+        <GlassyTile className="text-sm text-muted">
           You have reached the highest available tier.
-        </p>
+        </GlassyTile>
       )}
-    </section>
+    </GlassySection>
   );
 }
diff --git a/src/pages/proposals/ProposalChamber.tsx b/src/pages/proposals/ProposalChamber.tsx
index fde85a7..6d38da8 100644
--- a/src/pages/proposals/ProposalChamber.tsx
+++ b/src/pages/proposals/ProposalChamber.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { ProposalPageHeader } from "@/components/ProposalPageHeader";
 import { HintLabel } from "@/components/Hint";
+import { SectionHeader } from "@/components/SectionHeader";
 import {
   apiChamberVote,
   apiCitizenVetoVote,
@@ -150,6 +151,7 @@ const ProposalChamber: React.FC = () => {
       <ProposalPageHeader
         title={chamberPage.chamberTitle}
         stage="vote"
+        proposalId={id}
         showFormationStage={proposal.formationEligible}
         chamber={proposal.chamber}
         proposer={proposal.proposer}
@@ -175,7 +177,7 @@ const ProposalChamber: React.FC = () => {
       </ProposalPageHeader>
 
       <section className="space-y-4">
-        <h2 className="text-lg font-semibold text-text">Voting quorum</h2>
+        <SectionHeader>Voting quorum</SectionHeader>
         <ProposalVoteStatsGrid
           abstainPercentOfTotal={chamberPage.abstainPercentOfTotal}
           abstainTotal={chamberPage.abstainTotal}
diff --git a/src/pages/proposals/ProposalChamberVeto.tsx b/src/pages/proposals/ProposalChamberVeto.tsx
index cb71860..e423ee9 100644
--- a/src/pages/proposals/ProposalChamberVeto.tsx
+++ b/src/pages/proposals/ProposalChamberVeto.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useParams } from "react-router";
 
 import { ProposalPageHeader } from "@/components/ProposalPageHeader";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Surface } from "@/components/Surface";
 import {
   apiChamberVetoVote,
@@ -101,6 +102,7 @@ const ProposalChamberVeto: React.FC = () => {
       <ProposalPageHeader
         title={`${proposal.title} — Chamber veto`}
         stage="chamber_veto"
+        proposalId={id}
         showFormationStage={proposal.formationEligible}
         chamber={proposal.chamber}
         proposer={proposal.proposer}
@@ -154,7 +156,7 @@ const ProposalChamberVeto: React.FC = () => {
       />
 
       <section className="space-y-3">
-        <h2 className="text-lg font-semibold text-text">Per-chamber votes</h2>
+        <SectionHeader>Per-chamber votes</SectionHeader>
         <div className="grid gap-3 xl:grid-cols-2">
           {proposal.chambers.map((chamber) => (
             <ProposalChamberVetoCard
diff --git a/src/pages/proposals/ProposalCitizenVeto.tsx b/src/pages/proposals/ProposalCitizenVeto.tsx
index 8c98f90..74b4a24 100644
--- a/src/pages/proposals/ProposalCitizenVeto.tsx
+++ b/src/pages/proposals/ProposalCitizenVeto.tsx
@@ -106,6 +106,7 @@ const ProposalCitizenVeto: React.FC = () => {
       <ProposalPageHeader
         title={`${proposal.title} — Citizen veto`}
         stage="citizen_veto"
+        proposalId={id}
         showFormationStage={proposal.formationEligible}
         chamber={proposal.chamber}
         proposer={proposal.proposer}
diff --git a/src/pages/proposals/ProposalCreation.tsx b/src/pages/proposals/ProposalCreation.tsx
index 1d1e94f..24d302e 100644
--- a/src/pages/proposals/ProposalCreation.tsx
+++ b/src/pages/proposals/ProposalCreation.tsx
@@ -157,7 +157,7 @@ const ProposalCreation: React.FC = () => {
   }, [step]);
 
   const textareaClassName =
-    "w-full rounded-xl border border-border bg-panel-alt px-3 py-2 text-sm text-text shadow-[var(--shadow-control)] transition " +
+    "w-full rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] px-3 py-2 text-sm text-text shadow-[var(--shadow-control)] transition supports-[backdrop-filter]:backdrop-blur-md hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] " +
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:ring-offset-2 focus-visible:ring-offset-panel";
 
   const goToStep = (next: StepKey) => {
diff --git a/src/pages/proposals/ProposalDeliberation.tsx b/src/pages/proposals/ProposalDeliberation.tsx
index 17b859b..c98858e 100644
--- a/src/pages/proposals/ProposalDeliberation.tsx
+++ b/src/pages/proposals/ProposalDeliberation.tsx
@@ -1,4 +1,5 @@
 import { Surface } from "@/components/Surface";
+import { SectionHeader } from "@/components/SectionHeader";
 import {
   ThreadCategoryFilter,
   ThreadComposer,
@@ -41,7 +42,7 @@ export const ProposalDeliberation: React.FC<ProposalDeliberationProps> = ({
       className="p-5"
     >
       <header className="flex flex-col gap-2 border-b border-border pb-4 sm:flex-row sm:items-start sm:justify-between">
-        <h2 className="text-lg font-semibold text-text">Deliberation</h2>
+        <SectionHeader>Deliberation</SectionHeader>
         <div className="flex flex-wrap gap-2 text-xs text-muted">
           <span>{deliberation.threadCount} threads</span>
           <span>{deliberation.replyCount} replies</span>
diff --git a/src/pages/proposals/ProposalDrafts.tsx b/src/pages/proposals/ProposalDrafts.tsx
index ce831b6..69a7091 100644
--- a/src/pages/proposals/ProposalDrafts.tsx
+++ b/src/pages/proposals/ProposalDrafts.tsx
@@ -5,11 +5,13 @@ import { Button } from "@/components/primitives/button";
 import { Badge } from "@/components/primitives/badge";
 import { SearchBar } from "@/components/SearchBar";
 import { PageHint } from "@/components/PageHint";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Kicker } from "@/components/Kicker";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
 import { apiProposalDrafts } from "@/lib/apiClient";
 import { formatDateTime } from "@/lib/dateTime";
 import { formatLoadError } from "@/lib/errorFormatting";
+import { proposalSummaryPreview } from "@/lib/textPreview";
 import type { ProposalDraftListItemDto } from "@/types/api";
 import { useAuth } from "@/app/auth/AuthContext";
 
@@ -88,7 +90,7 @@ const ProposalDrafts: React.FC = () => {
       </div>
 
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <h1 className="text-xl font-semibold text-text">Drafts</h1>
+        <SectionHeader>Drafts</SectionHeader>
         <SearchBar
           value={query}
           onChange={(e) => setQuery(e.target.value)}
@@ -145,7 +147,9 @@ const ProposalDrafts: React.FC = () => {
                 <h2 className="text-lg font-semibold text-text">
                   {draft.title}
                 </h2>
-                <p className="text-sm text-muted">{draft.summary}</p>
+                <p className="max-h-[4.35em] overflow-hidden text-sm leading-[1.45] text-muted">
+                  {proposalSummaryPreview(draft.summary)}
+                </p>
               </div>
               <Badge variant="outline">{draft.chamber}</Badge>
             </div>
diff --git a/src/pages/proposals/ProposalFinished.tsx b/src/pages/proposals/ProposalFinished.tsx
index 5477565..90a7204 100644
--- a/src/pages/proposals/ProposalFinished.tsx
+++ b/src/pages/proposals/ProposalFinished.tsx
@@ -1,5 +1,6 @@
 import { Link, useParams } from "react-router";
 import { Button } from "@/components/primitives/button";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Surface } from "@/components/Surface";
 import { ProposalPageHeader } from "@/components/ProposalPageHeader";
 import { apiProposalFinishedPage } from "@/lib/apiClient";
@@ -49,6 +50,7 @@ const ProposalFinished: React.FC = () => {
       <ProposalPageHeader
         title={proposal.title}
         stage={proposal.terminalStage}
+        proposalId={id}
         showFormationStage={proposal.formationEligible}
         chamber={proposal.chamber}
         proposer={proposal.proposer}
@@ -71,9 +73,7 @@ const ProposalFinished: React.FC = () => {
       </ProposalPageHeader>
 
       <section className="space-y-3">
-        <h2 className="text-lg font-semibold text-text">
-          {proposal.terminalLabel}
-        </h2>
+        <SectionHeader>{proposal.terminalLabel}</SectionHeader>
         <Surface
           variant="panelAlt"
           radius="2xl"
diff --git a/src/pages/proposals/ProposalFormation.tsx b/src/pages/proposals/ProposalFormation.tsx
index aba3e2d..12d2d0f 100644
--- a/src/pages/proposals/ProposalFormation.tsx
+++ b/src/pages/proposals/ProposalFormation.tsx
@@ -7,6 +7,7 @@ import {
   apiFormationProjectFinish,
   apiProposalFormationPage,
 } from "@/lib/apiClient";
+import { getFormationActionVisibility } from "@/lib/formationActionsUi";
 import { viewerIsProposalAuthor } from "@/lib/proposalUi";
 import { parseRatio } from "@/lib/dtoParsers";
 import { useAuth } from "@/app/auth/AuthContext";
@@ -56,36 +57,39 @@ const ProposalFormation: React.FC = () => {
   }
 
   const milestoneRatio = parseRatio(project.milestones);
+  const teamSlotRatio = parseRatio(project.teamSlots);
   const milestones = { filled: milestoneRatio.a, total: milestoneRatio.b };
+  const openRoleCount =
+    project.openSlots.length > 0
+      ? project.openSlots.length
+      : Math.max(teamSlotRatio.b - teamSlotRatio.a, 0);
   const nextMilestone =
     project.nextMilestoneIndex ??
     (milestones.total > 0 ? milestones.filled + 1 : undefined);
   const pendingMilestone = project.pendingMilestoneIndex ?? undefined;
   const isProposerViewer = viewerIsProposalAuthor(
     auth.address,
-    project.proposer,
+    project.proposerId || project.proposer,
   );
-  const canJoinProject =
-    project.projectState !== "ready_to_finish" &&
-    project.projectState !== "completed" &&
-    project.projectState !== "canceled";
-  const canSubmitMilestone =
-    auth.authenticated &&
-    auth.eligible &&
-    !actionBusy &&
-    project.projectState === "active" &&
-    typeof nextMilestone === "number" &&
-    nextMilestone > 0 &&
-    nextMilestone <= milestones.total;
-  const canOpenMilestoneVote =
-    project.projectState === "awaiting_milestone_vote" &&
-    typeof pendingMilestone === "number" &&
-    pendingMilestone > 0;
-  const canFinishProject =
-    auth.authenticated &&
-    isProposerViewer &&
-    !actionBusy &&
-    project.projectState === "ready_to_finish";
+  const viewerIsTeamMember = project.viewer?.isTeamMember ?? isProposerViewer;
+  const actionVisibility = getFormationActionVisibility({
+    actionBusy,
+    authenticated: auth.authenticated,
+    eligible: auth.eligible,
+    hasOpenRoles: openRoleCount > 0,
+    isProposerViewer: project.viewer?.isProposer ?? isProposerViewer,
+    nextMilestone:
+      typeof nextMilestone === "number" && nextMilestone <= milestones.total
+        ? nextMilestone
+        : undefined,
+    pendingMilestone,
+    projectState: project.projectState,
+    viewerCanFinishProject: project.viewer?.canFinishProject,
+    viewerCanJoin: project.viewer?.canJoin,
+    viewerCanOpenMilestoneVote: project.viewer?.canOpenMilestoneVote,
+    viewerCanSubmitMilestone: project.viewer?.canSubmitMilestone,
+    viewerIsTeamMember,
+  });
   const stageForHeader =
     project.projectState === "awaiting_milestone_vote" ? "vote" : "build";
 
@@ -112,49 +116,47 @@ const ProposalFormation: React.FC = () => {
       <ProposalPageHeader
         title={project.title}
         stage={stageForHeader}
+        proposalId={id}
         chamber={project.chamber}
         proposer={project.proposer}
       />
 
-      <ProposalFormationActions
-        actionBusy={actionBusy}
-        actionError={actionError}
-        authStatus={auth}
-        canFinishProject={canFinishProject}
-        canJoinProject={canJoinProject}
-        canOpenMilestoneVote={canOpenMilestoneVote}
-        canSubmitMilestone={canSubmitMilestone}
-        isProposerViewer={isProposerViewer}
-        nextMilestone={nextMilestone}
-        onFinishProject={() =>
-          void runAction(async () => {
-            if (!id) return;
-            await apiFormationProjectFinish({ proposalId: id });
-          })
-        }
-        onJoinProject={() =>
-          void runAction(async () => {
-            if (!id) return;
-            await apiFormationJoin({ proposalId: id });
-          })
-        }
-        onOpenMilestoneVote={() => {
-          if (!id) return;
-          navigate(`/app/proposals/${id}/chamber`);
-        }}
-        onSubmitMilestone={() =>
-          void runAction(async () => {
-            if (!id || !nextMilestone) return;
-            await apiFormationMilestoneSubmit({
-              proposalId: id,
-              milestoneIndex: nextMilestone,
-            });
-          })
-        }
-        pendingMilestone={pendingMilestone}
-      />
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ProposalFormationStatus stageData={project.stageData} />
 
-      <ProposalFormationStatus stageData={project.stageData} />
+        <ProposalFormationActions
+          actionError={actionError}
+          authStatus={auth}
+          visibility={actionVisibility}
+          nextMilestone={nextMilestone}
+          onFinishProject={() =>
+            void runAction(async () => {
+              if (!id) return;
+              await apiFormationProjectFinish({ proposalId: id });
+            })
+          }
+          onJoinProject={() =>
+            void runAction(async () => {
+              if (!id) return;
+              await apiFormationJoin({ proposalId: id });
+            })
+          }
+          onOpenMilestoneVote={() => {
+            if (!id) return;
+            navigate(`/app/proposals/${id}/chamber`);
+          }}
+          onSubmitMilestone={() =>
+            void runAction(async () => {
+              if (!id || !nextMilestone) return;
+              await apiFormationMilestoneSubmit({
+                proposalId: id,
+                milestoneIndex: nextMilestone,
+              });
+            })
+          }
+          pendingMilestone={pendingMilestone}
+        />
+      </div>
 
       <ProposalDetailsSections
         summary={project.summary}
diff --git a/src/pages/proposals/ProposalPP.tsx b/src/pages/proposals/ProposalPP.tsx
index 3ab9f44..9a6f201 100644
--- a/src/pages/proposals/ProposalPP.tsx
+++ b/src/pages/proposals/ProposalPP.tsx
@@ -118,6 +118,7 @@ const ProposalPP: React.FC = () => {
         <ProposalPageHeader
           title={proposal.title}
           stage="pool"
+          proposalId={id}
           showFormationStage={proposal.formationEligible}
           chamber={proposal.chamber}
           proposer={proposal.proposer}
diff --git a/src/pages/proposals/ProposalReferendum.tsx b/src/pages/proposals/ProposalReferendum.tsx
index 5653843..79aaeb2 100644
--- a/src/pages/proposals/ProposalReferendum.tsx
+++ b/src/pages/proposals/ProposalReferendum.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useParams } from "react-router";
 
 import { ProposalPageHeader } from "@/components/ProposalPageHeader";
+import { SectionHeader } from "@/components/SectionHeader";
 import { apiProposalReferendumPage, apiReferendumVote } from "@/lib/apiClient";
 import {
   getProposalOrdinaryVoteGate,
@@ -146,6 +147,7 @@ const ProposalReferendum: React.FC = () => {
       <ProposalPageHeader
         title={`${proposal.title} — Referendum`}
         stage="vote"
+        proposalId={id}
         showFormationStage={false}
         chamber="System-wide referendum"
         proposer={proposal.proposer}
@@ -165,7 +167,7 @@ const ProposalReferendum: React.FC = () => {
       </ProposalPageHeader>
 
       <section className="space-y-4">
-        <h2 className="text-lg font-semibold text-text">Referendum quorum</h2>
+        <SectionHeader>Referendum quorum</SectionHeader>
         <ProposalVoteStatsGrid
           abstainPercentOfTotal={abstainPercentOfTotal}
           abstainTotal={abstainTotal}
diff --git a/src/pages/proposals/formation/ProposalFormationActions.tsx b/src/pages/proposals/formation/ProposalFormationActions.tsx
index b90f991..cf0a55b 100644
--- a/src/pages/proposals/formation/ProposalFormationActions.tsx
+++ b/src/pages/proposals/formation/ProposalFormationActions.tsx
@@ -1,129 +1,123 @@
+import { SectionHeader } from "@/components/SectionHeader";
 import { Button } from "@/components/primitives/button";
-import { Surface } from "@/components/Surface";
 import { formatLoadError } from "@/lib/errorFormatting";
+import type { FormationActionVisibility } from "@/lib/formationActionsUi";
 
 type ProposalFormationActionsProps = {
-  actionBusy: boolean;
   actionError: string | null;
   authStatus: {
     authenticated: boolean;
     eligible: boolean;
     loading: boolean;
   };
-  canFinishProject: boolean;
-  canJoinProject: boolean;
-  canOpenMilestoneVote: boolean;
-  canSubmitMilestone: boolean;
-  isProposerViewer: boolean;
   nextMilestone: number | undefined;
   onFinishProject: () => void;
   onJoinProject: () => void;
   onOpenMilestoneVote: () => void;
   onSubmitMilestone: () => void;
   pendingMilestone: number | undefined;
+  visibility: FormationActionVisibility;
 };
 
 export const ProposalFormationActions: React.FC<
   ProposalFormationActionsProps
 > = ({
-  actionBusy,
   actionError,
   authStatus,
-  canFinishProject,
-  canJoinProject,
-  canOpenMilestoneVote,
-  canSubmitMilestone,
-  isProposerViewer,
   nextMilestone,
   onFinishProject,
   onJoinProject,
   onOpenMilestoneVote,
   onSubmitMilestone,
   pendingMilestone,
+  visibility,
 }) => {
+  const hasVisibleActions =
+    visibility.showJoinProject ||
+    visibility.showSubmitMilestone ||
+    visibility.showOpenMilestoneVote ||
+    visibility.showFinishProject;
+
   return (
-    <section className="space-y-3">
-      <h2 className="text-lg font-semibold text-text">Formation actions</h2>
-      <Surface
-        variant="panelAlt"
-        radius="2xl"
-        shadow="tile"
-        className="space-y-3 p-4"
-      >
+    <section className="space-y-2">
+      <SectionHeader>Formation actions</SectionHeader>
+      {hasVisibleActions ? (
         <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
-          <Button
-            type="button"
-            size="lg"
-            disabled={
-              !authStatus.authenticated ||
-              !authStatus.eligible ||
-              actionBusy ||
-              isProposerViewer ||
-              !canJoinProject
-            }
-            onClick={onJoinProject}
-          >
-            Join project
-          </Button>
+          {visibility.showJoinProject ? (
+            <Button
+              type="button"
+              size="md"
+              disabled={!visibility.canJoinProject}
+              onClick={onJoinProject}
+            >
+              Join project
+            </Button>
+          ) : null}
 
-          <Button
-            type="button"
-            size="lg"
-            variant="outline"
-            disabled={!canSubmitMilestone}
-            onClick={onSubmitMilestone}
-          >
-            Submit M{nextMilestone ?? "-"}
-          </Button>
+          {visibility.showSubmitMilestone ? (
+            <Button
+              type="button"
+              size="md"
+              variant="outline"
+              disabled={!visibility.canSubmitMilestone}
+              onClick={onSubmitMilestone}
+            >
+              Submit M{nextMilestone ?? "-"}
+            </Button>
+          ) : null}
 
-          <Button
-            type="button"
-            size="lg"
-            variant="outline"
-            disabled={!canOpenMilestoneVote}
-            onClick={onOpenMilestoneVote}
-          >
-            Vote in chamber M{pendingMilestone ?? "-"}
-          </Button>
+          {visibility.showOpenMilestoneVote ? (
+            <Button
+              type="button"
+              size="md"
+              variant="outline"
+              disabled={!visibility.canOpenMilestoneVote}
+              onClick={onOpenMilestoneVote}
+            >
+              Vote in chamber M{pendingMilestone ?? "-"}
+            </Button>
+          ) : null}
 
-          <Button
-            type="button"
-            size="lg"
-            variant="outline"
-            disabled={!canFinishProject}
-            onClick={onFinishProject}
-          >
-            Finish Project
-          </Button>
+          {visibility.showFinishProject ? (
+            <Button
+              type="button"
+              size="md"
+              variant="outline"
+              disabled={!visibility.canFinishProject}
+              onClick={onFinishProject}
+            >
+              Finish Project
+            </Button>
+          ) : null}
         </div>
+      ) : visibility.statusMessage ? (
+        <p className="text-sm text-muted">{visibility.statusMessage}</p>
+      ) : null}
 
-        {authStatus.loading ? (
-          <p className="text-xs text-muted">Checking wallet status...</p>
-        ) : !authStatus.authenticated ? (
-          <p className="text-xs text-muted">Connect a wallet to act.</p>
-        ) : isProposerViewer ? (
-          <p className="text-xs text-muted">
-            Proposer is counted in team slots by default.
-          </p>
-        ) : authStatus.authenticated && !authStatus.eligible ? (
-          <p className="text-xs text-muted">
-            Wallet is connected, but not active (gated).
-          </p>
-        ) : null}
+      {authStatus.loading ? (
+        <p className="text-xs text-muted">Checking wallet status...</p>
+      ) : hasVisibleActions && !authStatus.authenticated ? (
+        <p className="text-xs text-muted">Connect a wallet to act.</p>
+      ) : hasVisibleActions &&
+        authStatus.authenticated &&
+        !authStatus.eligible ? (
+        <p className="text-xs text-muted">
+          Wallet is connected, but not active (gated).
+        </p>
+      ) : null}
 
-        {canOpenMilestoneVote ? (
-          <p className="text-xs text-muted">
-            Milestone continuation/release voting is done in the Chamber vote
-            stage.
-          </p>
-        ) : null}
+      {visibility.showOpenMilestoneVote ? (
+        <p className="text-xs text-muted">
+          Milestone continuation/release voting is done in the Chamber vote
+          stage.
+        </p>
+      ) : null}
 
-        {actionError ? (
-          <p className="text-xs text-destructive" role="status">
-            {formatLoadError(actionError)}
-          </p>
-        ) : null}
-      </Surface>
+      {actionError ? (
+        <p className="text-xs text-destructive" role="status">
+          {formatLoadError(actionError)}
+        </p>
+      ) : null}
     </section>
   );
 };
diff --git a/src/pages/proposals/list/ProposalListCard.tsx b/src/pages/proposals/list/ProposalListCard.tsx
index d0a3c4a..34138d5 100644
--- a/src/pages/proposals/list/ProposalListCard.tsx
+++ b/src/pages/proposals/list/ProposalListCard.tsx
@@ -1,6 +1,4 @@
-import { Badge } from "@/components/primitives/badge";
-import { ExpandableCard } from "@/components/ExpandableCard";
-import { StageChip } from "@/components/StageChip";
+import { GlassyRecordCard } from "@/components/GlassyRecordCard";
 import { Surface } from "@/components/Surface";
 import { getFormationProgress } from "@/lib/dtoParsers";
 import {
@@ -82,31 +80,18 @@ export function ProposalListCard({
   const loadingMessage = getProposalListLoadingMessage(proposal);
 
   return (
-    <ExpandableCard
+    <GlassyRecordCard
       expanded={expanded}
       onToggle={onToggle}
+      rail={expanded ? "action" : "idle"}
+      meta={proposal.chamber}
+      stage={proposal.stage}
+      stageLabel={proposal.summaryPill === "Finished" ? "Finished" : undefined}
       title={proposal.title}
-      right={
-        <>
-          <StageChip
-            stage={proposal.stage}
-            label={proposal.summaryPill === "Finished" ? "Finished" : undefined}
-          />
-          <Badge variant="muted" size="sm">
-            {proposal.chamber.replace(/\s*chamber\s*$/i, "")}
-          </Badge>
-          <Badge variant="muted" size="sm">
-            {proposal.tier}
-          </Badge>
-        </>
-      }
+      summary={proposal.summary}
+      dateText={proposal.date}
     >
       <section className="space-y-5">
-        <div className="space-y-2">
-          <p className="text-sm font-semibold text-text">Summary</p>
-          <p className="text-sm text-muted">{proposal.summary}</p>
-        </div>
-
         {finishedPage ? (
           <ProposalFinishedSnapshot
             itemKeyPrefix={`${proposal.id}-finished`}
@@ -150,7 +135,7 @@ export function ProposalListCard({
           />
         ) : loadingMessage ? (
           <Surface
-            variant="panelAlt"
+            variant="glass"
             radius="2xl"
             shadow="tile"
             className="px-5 py-4 text-sm text-muted"
@@ -177,6 +162,6 @@ export function ProposalListCard({
           tags={proposal.tags}
         />
       </section>
-    </ExpandableCard>
+    </GlassyRecordCard>
   );
 }
diff --git a/src/pages/proposals/list/ProposalListOutcomeSnapshots.tsx b/src/pages/proposals/list/ProposalListOutcomeSnapshots.tsx
index ae933dc..39eee9f 100644
--- a/src/pages/proposals/list/ProposalListOutcomeSnapshots.tsx
+++ b/src/pages/proposals/list/ProposalListOutcomeSnapshots.tsx
@@ -16,7 +16,7 @@ export function ProposalFinishedSnapshot({
     <div className="space-y-3">
       <p className="text-sm font-semibold text-text">Outcome status</p>
       <Surface
-        variant="panelAlt"
+        variant="glass"
         radius="2xl"
         shadow="tile"
         className="px-5 py-4 text-sm text-muted"
@@ -42,7 +42,7 @@ export function ProposalCitizenVetoSnapshot({
     <div className="space-y-3">
       <p className="text-sm font-semibold text-text">Citizen veto snapshot</p>
       <Surface
-        variant="panelAlt"
+        variant="glass"
         radius="2xl"
         shadow="tile"
         className="px-5 py-4 text-sm text-muted"
@@ -66,7 +66,7 @@ export function ProposalChamberVetoSnapshot({
     <div className="space-y-3">
       <p className="text-sm font-semibold text-text">Chamber veto snapshot</p>
       <Surface
-        variant="panelAlt"
+        variant="glass"
         radius="2xl"
         shadow="tile"
         className="px-5 py-4 text-sm text-muted"
@@ -91,7 +91,7 @@ export function ProposalFormationSnapshot({
       <p className="text-sm font-semibold text-text">Execution snapshot</p>
 
       <Surface
-        variant="panelAlt"
+        variant="glass"
         radius="2xl"
         shadow="tile"
         className="space-y-3 px-5 py-4"
diff --git a/src/pages/proposals/list/ProposalListVoteSnapshots.tsx b/src/pages/proposals/list/ProposalListVoteSnapshots.tsx
index daf5848..eca0e95 100644
--- a/src/pages/proposals/list/ProposalListVoteSnapshots.tsx
+++ b/src/pages/proposals/list/ProposalListVoteSnapshots.tsx
@@ -16,7 +16,7 @@ export function ProposalPoolSnapshot({
       <p className="text-sm font-semibold text-text">Quorum of attention</p>
 
       <Surface
-        variant="panelAlt"
+        variant="glass"
         radius="2xl"
         shadow="tile"
         className="flex flex-wrap items-center justify-center gap-4 px-6 py-5 text-lg font-semibold"
@@ -69,7 +69,7 @@ export function ProposalChamberSnapshot({
       <p className="text-sm font-semibold text-text">Vote snapshot</p>
 
       <Surface
-        variant="panelAlt"
+        variant="glass"
         radius="2xl"
         shadow="tile"
         className="space-y-3 px-5 py-4"
diff --git a/src/pages/proposals/pool/ProposalPoolAttentionStats.tsx b/src/pages/proposals/pool/ProposalPoolAttentionStats.tsx
index 1de5b54..bf869ee 100644
--- a/src/pages/proposals/pool/ProposalPoolAttentionStats.tsx
+++ b/src/pages/proposals/pool/ProposalPoolAttentionStats.tsx
@@ -1,4 +1,5 @@
 import { HintLabel } from "@/components/Hint";
+import { SectionHeader } from "@/components/SectionHeader";
 import { StatTile } from "@/components/StatTile";
 
 type ProposalPoolAttentionStatsProps = {
@@ -18,7 +19,7 @@ export const ProposalPoolAttentionStats: React.FC<
 }) => {
   return (
     <section className="space-y-3">
-      <h2 className="text-lg font-semibold text-text">Quorum of attention</h2>
+      <SectionHeader>Quorum of attention</SectionHeader>
       <div className="grid gap-3 text-sm text-text sm:grid-cols-2 lg:grid-cols-2">
         <StatTile
           label={
diff --git a/src/pages/proposals/shared/ProposalDelegationContext.tsx b/src/pages/proposals/shared/ProposalDelegationContext.tsx
index 932d067..4372116 100644
--- a/src/pages/proposals/shared/ProposalDelegationContext.tsx
+++ b/src/pages/proposals/shared/ProposalDelegationContext.tsx
@@ -1,4 +1,5 @@
 import { AddressInline } from "@/components/AddressInline";
+import { SectionHeader } from "@/components/SectionHeader";
 import { StatTile } from "@/components/StatTile";
 import { Surface } from "@/components/Surface";
 import { formatDateTime } from "@/lib/dateTime";
@@ -59,7 +60,7 @@ export const ProposalDelegationContext: React.FC<
 
   return (
     <section className="space-y-4">
-      <h2 className="text-lg font-semibold text-text">Delegation context</h2>
+      <SectionHeader>Delegation context</SectionHeader>
       <div className="grid gap-3 text-sm text-text sm:grid-cols-2 lg:grid-cols-3">
         <StatTile
           label="Vote weight source"
diff --git a/src/pages/proposals/shared/ProposalStageStatus.tsx b/src/pages/proposals/shared/ProposalStageStatus.tsx
index a036ad1..2f103c7 100644
--- a/src/pages/proposals/shared/ProposalStageStatus.tsx
+++ b/src/pages/proposals/shared/ProposalStageStatus.tsx
@@ -1,3 +1,4 @@
+import { SectionHeader } from "@/components/SectionHeader";
 import { Surface } from "@/components/Surface";
 
 type ProposalStageStatusEntry = {
@@ -17,7 +18,7 @@ export const ProposalStageStatus: React.FC<ProposalStageStatusProps> = ({
 }) => {
   return (
     <section className="space-y-3">
-      <h2 className="text-lg font-semibold text-text">{title}</h2>
+      <SectionHeader>{title}</SectionHeader>
       <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
         {stageData.map((entry) => (
           <Surface
diff --git a/src/pages/proposals/veto/ProposalChamberVetoStats.tsx b/src/pages/proposals/veto/ProposalChamberVetoStats.tsx
index 964eb79..0ea01c7 100644
--- a/src/pages/proposals/veto/ProposalChamberVetoStats.tsx
+++ b/src/pages/proposals/veto/ProposalChamberVetoStats.tsx
@@ -1,3 +1,4 @@
+import { SectionHeader } from "@/components/SectionHeader";
 import { StatTile } from "@/components/StatTile";
 import { Surface } from "@/components/Surface";
 
@@ -20,7 +21,7 @@ export const ProposalChamberVetoStats: React.FC<
 }) => {
   return (
     <section className="space-y-4">
-      <h2 className="text-lg font-semibold text-text">Chamber veto window</h2>
+      <SectionHeader>Chamber veto window</SectionHeader>
       {voteCount === 0 ? (
         <Surface
           variant="panelAlt"
diff --git a/src/pages/proposals/veto/ProposalCitizenVetoStats.tsx b/src/pages/proposals/veto/ProposalCitizenVetoStats.tsx
index 77d53e6..db680e2 100644
--- a/src/pages/proposals/veto/ProposalCitizenVetoStats.tsx
+++ b/src/pages/proposals/veto/ProposalCitizenVetoStats.tsx
@@ -1,3 +1,4 @@
+import { SectionHeader } from "@/components/SectionHeader";
 import { StatTile } from "@/components/StatTile";
 import { Surface } from "@/components/Surface";
 
@@ -28,7 +29,7 @@ export const ProposalCitizenVetoStats: React.FC<
 }) => {
   return (
     <section className="space-y-4">
-      <h2 className="text-lg font-semibold text-text">Citizen veto window</h2>
+      <SectionHeader>Citizen veto window</SectionHeader>
       {castVotes === 0 ? (
         <Surface
           variant="panelAlt"
diff --git a/src/styles/base.css b/src/styles/base.css
index 2e42be5..fb37dd9 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -4,8 +4,8 @@
   --bg: #f2f5ff; /* app shell background */
   --page: #eaf0ff; /* page container background */
   --bg-accent: #e8efff; /* navbar */
-  --panel: #f9fbff; /* main containers */
-  --panel-alt: #f2f7ff; /* tiles/inputs */
+  --panel: rgba(249, 251, 255, 0.78); /* main containers */
+  --panel-alt: rgba(242, 247, 255, 0.66); /* tiles/inputs */
   --text: #111827;
   --muted: #5d6475;
   /* Primary is derived from sidebar hue but intentionally less saturated. */
@@ -36,6 +36,13 @@
   --shadow-control: 0 10px 22px rgba(17, 24, 39, 0.08);
   --glass-border: rgba(255, 255, 255, 0.42);
   --glass-border-strong: rgba(255, 255, 255, 0.62);
+  --surface-glass-bg: rgba(249, 251, 255, 0.86);
+  --surface-glass-border: rgba(79, 106, 215, 0.24);
+  --surface-glass-ring: rgba(79, 106, 215, 0.16);
+  --surface-glass-hover-bg: rgba(249, 251, 255, 0.94);
+  --surface-glass-hover-border: rgba(79, 106, 215, 0.36);
+  --control-glass-bg: rgba(249, 251, 255, 0.76);
+  --control-glass-hover-bg: rgba(249, 251, 255, 0.9);
   --tint-primary: rgba(111, 168, 255, 0.06);
   --tint-primary-strong: rgba(111, 168, 255, 0.1);
 
@@ -82,14 +89,21 @@
   --bg: #ffffff;
   --page: #ffffff;
   --bg-accent: #ffffff;
-  --panel: #ffffff;
-  --panel-alt: #ffffff;
+  --panel: rgba(255, 255, 255, 0.82);
+  --panel-alt: rgba(255, 255, 255, 0.68);
   --text: #111827;
   --muted: #6b7280;
   --border: rgba(17, 24, 39, 0.14);
   --veil: rgba(17, 24, 39, 0.45);
   --glass-border: rgba(255, 255, 255, 0.55);
   --glass-border-strong: rgba(255, 255, 255, 0.72);
+  --surface-glass-bg: rgba(255, 255, 255, 0.88);
+  --surface-glass-border: rgba(79, 106, 215, 0.22);
+  --surface-glass-ring: rgba(79, 106, 215, 0.16);
+  --surface-glass-hover-bg: rgba(255, 255, 255, 0.96);
+  --surface-glass-hover-border: rgba(79, 106, 215, 0.34);
+  --control-glass-bg: rgba(255, 255, 255, 0.78);
+  --control-glass-hover-bg: rgba(255, 255, 255, 0.92);
   --shadow-card: 0 18px 44px rgba(17, 24, 39, 0.09);
   --shadow-popover: 0 22px 60px rgba(17, 24, 39, 0.16);
   --shadow-tile: 0 14px 34px rgba(17, 24, 39, 0.09);
@@ -107,8 +121,8 @@
   --bg: #000000;
   --page: #000000;
   --bg-accent: #000000;
-  --panel: #000000;
-  --panel-alt: #000000;
+  --panel: rgba(6, 9, 14, 0.78);
+  --panel-alt: rgba(10, 14, 22, 0.68);
   --text: #f5f5f5;
   --muted: #a3a3a3;
   --primary-dim: rgba(111, 168, 255, 0.22);
@@ -118,6 +132,13 @@
   --veil: rgba(0, 0, 0, 0.7);
   --glass-border: rgba(255, 255, 255, 0.14);
   --glass-border-strong: rgba(255, 255, 255, 0.22);
+  --surface-glass-bg: rgba(6, 9, 14, 0.72);
+  --surface-glass-border: rgba(255, 255, 255, 0.12);
+  --surface-glass-ring: rgba(111, 168, 255, 0.24);
+  --surface-glass-hover-bg: rgba(12, 18, 28, 0.82);
+  --surface-glass-hover-border: rgba(111, 168, 255, 0.32);
+  --control-glass-bg: rgba(10, 14, 22, 0.72);
+  --control-glass-hover-bg: rgba(15, 22, 34, 0.82);
   --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.72);
   --shadow-popover: 0 22px 60px rgba(0, 0, 0, 0.82);
   --shadow-tile: 0 14px 34px rgba(0, 0, 0, 0.64);
@@ -142,6 +163,68 @@
   --sidebar-active-shadow-strong: 0 14px 28px rgba(111, 168, 255, 0.22);
 }
 
+:root[data-theme="fire"] {
+  color-scheme: dark;
+  --bg: #080200;
+  --page: #0d0300;
+  --bg-accent: #120500;
+  --panel: rgba(26, 8, 2, 0.82);
+  --panel-alt: rgba(42, 13, 4, 0.68);
+  --text: #fff7ed;
+  --muted: #d8aa82;
+  --primary: #ff8a1f;
+  --primary-hover: #ffad45;
+  --secondary: #ffc857;
+  --accent: #ff3d00;
+  --accent-warm: #ffd166;
+  --primary-foreground: #160400;
+  --secondary-foreground: #160400;
+  --accent-foreground: #fff7ed;
+  --muted-foreground: var(--muted);
+  --destructive: #ff2d1a;
+  --destructive-foreground: #fff7ed;
+  --ok: #ffcf57;
+  --danger: var(--destructive);
+  --primary-dim: rgba(255, 138, 31, 0.24);
+  --cool-dim: rgba(255, 61, 0, 0.18);
+  --warm-dim: rgba(255, 209, 102, 0.24);
+  --border: rgba(255, 226, 194, 0.14);
+  --veil: rgba(7, 1, 0, 0.76);
+  --glass-border: rgba(255, 187, 104, 0.16);
+  --glass-border-strong: rgba(255, 187, 104, 0.28);
+  --surface-glass-bg: rgba(29, 8, 2, 0.74);
+  --surface-glass-border: rgba(255, 187, 104, 0.16);
+  --surface-glass-ring: rgba(255, 138, 31, 0.28);
+  --surface-glass-hover-bg: rgba(49, 15, 4, 0.84);
+  --surface-glass-hover-border: rgba(255, 138, 31, 0.42);
+  --control-glass-bg: rgba(38, 11, 3, 0.74);
+  --control-glass-hover-bg: rgba(59, 18, 5, 0.86);
+  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.78);
+  --shadow-popover: 0 22px 60px rgba(0, 0, 0, 0.86);
+  --shadow-tile: 0 14px 34px rgba(0, 0, 0, 0.7);
+  --shadow-control: 0 10px 22px rgba(0, 0, 0, 0.56);
+  --shadow-primary: 0 14px 34px rgba(255, 89, 0, 0.32);
+  --shadow-pagehint: 0 14px 30px rgba(255, 89, 0, 0.34);
+  --pagehint: #ff6a00;
+  --pagehint-hover: #ff8a1f;
+  --pagehint-dim: rgba(255, 106, 0, 0.26);
+  --pagehint-foreground: #160400;
+  --btn-primary-bg: rgba(255, 104, 0, 0.4);
+  --btn-primary-hover-bg: rgba(255, 122, 0, 0.78);
+  --btn-primary-active-bg: rgba(255, 138, 31, 0.94);
+
+  --sidebar-bg: #0b0200;
+  --sidebar-border: rgba(255, 187, 104, 0.16);
+  --sidebar-text: #fff7ed;
+  --sidebar-muted: #d8aa82;
+  --sidebar-primary: #ff9d2e;
+  --sidebar-primary-foreground: #160400;
+  --sidebar-primary-dim: rgba(255, 138, 31, 0.28);
+  --sidebar-active-bg: rgba(255, 104, 0, 0.18);
+  --sidebar-active-shadow: 0 10px 20px rgba(255, 89, 0, 0.18);
+  --sidebar-active-shadow-strong: 0 14px 28px rgba(255, 89, 0, 0.26);
+}
+
 *,
 *::before,
 *::after {
@@ -179,6 +262,69 @@ button[disabled] {
   background: var(--primary-dim);
 }
 
+/* Keeps older page-local bg-panel blocks inside the Phase 89 glass grammar. */
+:where(
+    div,
+    section,
+    article,
+    aside,
+    header,
+    footer,
+    main,
+    form
+  )[class*="bg-panel"][class*="border"] {
+  border-color: var(--surface-glass-border);
+  backdrop-filter: blur(14px) saturate(145%);
+}
+
+:where(
+    div,
+    section,
+    article,
+    aside,
+    header,
+    footer,
+    main,
+    form
+  )[class*="rounded-xl"][class*="border-border"],
+:where(
+    div,
+    section,
+    article,
+    aside,
+    header,
+    footer,
+    main,
+    form
+  )[class*="rounded-lg"][class*="border-border"],
+:where(
+    div,
+    section,
+    article,
+    aside,
+    header,
+    footer,
+    main,
+    form
+  )[class*="rounded-md"][class*="border-border"] {
+  border-color: var(--surface-glass-border);
+  background-color: var(--control-glass-bg);
+  backdrop-filter: blur(14px) saturate(145%);
+}
+
+:where(
+    div,
+    section,
+    article,
+    aside,
+    header,
+    footer,
+    main,
+    form
+  )[class*="hover:bg-panel"]:hover {
+  background-color: var(--surface-glass-hover-bg);
+}
+
 .skip-link {
   position: absolute;
   top: -40px;
@@ -195,7 +341,6 @@ button[disabled] {
 }
 
 .eyebrow {
-  letter-spacing: 0.18em;
   text-transform: uppercase;
   font-size: 0.75rem;
   color: var(--muted);
@@ -209,7 +354,6 @@ h4,
 h5,
 h6 {
   font-weight: 600;
-  letter-spacing: -0.015em;
   color: var(--text);
 }
 
@@ -251,20 +395,3 @@ h3 {
     transform: translateX(260%) skewX(-18deg);
   }
 }
-
-@keyframes guide-particle-float {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, 22px, 0) scale(0.95);
-  }
-  12% {
-    opacity: 0.85;
-  }
-  60% {
-    opacity: 0.35;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(14px, -140px, 0) scale(0.6);
-  }
-}
diff --git a/src/styles/global.css b/src/styles/global.css
index 1403cd9..ef957d4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,6 +5,8 @@
 
 html {
   font-size: 112.5%;
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
 }
 
 :root {
@@ -27,7 +29,7 @@ html {
   --chart-3: var(--accent);
   --chart-4: var(--accent-warm);
   --chart-5: var(--primary-hover);
-  --radius: 0.625rem;
+  --radius: 0.5rem;
   /* Sidebar is intentionally decoupled from main UI colors. */
   --sidebar: var(--sidebar-bg);
   --sidebar-foreground: var(--sidebar-text);
diff --git a/src/types/api.ts b/src/types/api.ts
index 0edd47f..5811815 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -343,6 +343,8 @@ export type FormationStageDto = "live" | "gathering" | "completed";
 export type FormationProjectDto = {
   id: string;
   title: string;
+  chamber?: string;
+  chamberTitle?: string;
   focus: string;
   proposer: string;
   summary: string;
@@ -876,6 +878,15 @@ export type FormationProposalPageDto = {
   openSlots: { title: string; desc: string }[];
   milestonesDetail: { title: string; desc: string }[];
   attachments: { id: string; title: string; href?: string }[];
+  viewer?: {
+    canExitTeam?: boolean;
+    canFinishProject?: boolean;
+    canJoin?: boolean;
+    canOpenMilestoneVote?: boolean;
+    canSubmitMilestone?: boolean;
+    isProposer: boolean;
+    isTeamMember: boolean;
+  };
   summary: string;
   overview: string;
   executionPlan: string[];
@@ -982,6 +993,16 @@ export type ProjectCardDto = {
   status: string;
   summary: string;
   chips: string[];
+  id?: string;
+  chamber?: string;
+  chamberTitle?: string;
+  focus?: string;
+  proposer?: string;
+  category?: FormationCategoryDto;
+  stage?: FormationStageDto;
+  budget?: string;
+  milestones?: string;
+  teamSlots?: string;
 };
 export type HumanDelegationChamberDto = {
   chamberId: string;
diff --git a/tests/unit/cm-economy-panel.test.ts b/tests/unit/cm-economy-panel.test.ts
index 8ce6f63..252a0e8 100644
--- a/tests/unit/cm-economy-panel.test.ts
+++ b/tests/unit/cm-economy-panel.test.ts
@@ -36,7 +36,28 @@ test("CmEconomyPanel renders CM totals, chamber breakdown, and history", () => {
 
   assert.ok(html.includes("CM + MM"));
   assert.ok(html.includes("Alpha Chamber"));
-  assert.ok(html.includes("LCM 5"));
+  assert.ok(html.includes("LCM"));
+  assert.ok(html.includes("5"));
+  assert.ok(html.includes("Members"));
   assert.ok(html.includes("Alpha Proposal"));
   assert.ok(html.includes("MM"));
+  assert.ok(html.includes("glassy-compact-row"));
+});
+
+test("CmEconomyPanel personal scope shows ACM and MM without chamber CM totals", () => {
+  const html = renderToStaticMarkup(
+    createElement(CmEconomyPanel, {
+      totals: { lcm: 12, mcm: 8, acm: 20 },
+      chambers: [],
+      history: [],
+      mmValue: 20,
+      totalsScope: "personal",
+    }),
+  );
+
+  assert.ok(html.includes("CM + MM"));
+  assert.ok(html.includes("ACM"));
+  assert.ok(html.includes("MM"));
+  assert.equal(html.includes("MCM"), false);
+  assert.equal(html.includes("LCM"), false);
 });
diff --git a/tests/unit/formation-actions-ui.test.ts b/tests/unit/formation-actions-ui.test.ts
new file mode 100644
index 0000000..c58fb1f
--- /dev/null
+++ b/tests/unit/formation-actions-ui.test.ts
@@ -0,0 +1,105 @@
+import { test } from "@rstest/core";
+import assert from "node:assert/strict";
+
+import {
+  getFormationActionVisibility,
+  type FormationActionVisibilityInput,
+} from "../../src/lib/formationActionsUi.ts";
+
+const baseInput: FormationActionVisibilityInput = {
+  actionBusy: false,
+  authenticated: true,
+  eligible: true,
+  hasOpenRoles: true,
+  isProposerViewer: false,
+  nextMilestone: 2,
+  pendingMilestone: undefined,
+  projectState: "active",
+  viewerIsTeamMember: false,
+};
+
+test("formation actions show join only to non-member non-proposer with open roles", () => {
+  const visibility = getFormationActionVisibility(baseInput);
+
+  assert.equal(visibility.showJoinProject, true);
+  assert.equal(visibility.canJoinProject, true);
+  assert.equal(visibility.showSubmitMilestone, false);
+  assert.equal(visibility.showFinishProject, false);
+});
+
+test("formation actions hide join from team members", () => {
+  const visibility = getFormationActionVisibility({
+    ...baseInput,
+    viewerIsTeamMember: true,
+  });
+
+  assert.equal(visibility.showJoinProject, false);
+  assert.equal(
+    visibility.statusMessage,
+    "You are on this Formation team. No team action is available right now.",
+  );
+});
+
+test("formation actions show milestone submit only to proposer", () => {
+  const visibility = getFormationActionVisibility({
+    ...baseInput,
+    isProposerViewer: true,
+    viewerIsTeamMember: true,
+  });
+
+  assert.equal(visibility.showJoinProject, false);
+  assert.equal(visibility.showSubmitMilestone, true);
+  assert.equal(visibility.canSubmitMilestone, true);
+});
+
+test("formation actions show chamber vote navigation when milestone vote is pending", () => {
+  const visibility = getFormationActionVisibility({
+    ...baseInput,
+    hasOpenRoles: false,
+    pendingMilestone: 2,
+    projectState: "awaiting_milestone_vote",
+  });
+
+  assert.equal(visibility.showOpenMilestoneVote, true);
+  assert.equal(visibility.canOpenMilestoneVote, true);
+  assert.equal(visibility.showJoinProject, false);
+});
+
+test("formation actions hide chamber vote navigation from project team members", () => {
+  const visibility = getFormationActionVisibility({
+    ...baseInput,
+    hasOpenRoles: false,
+    pendingMilestone: 2,
+    projectState: "awaiting_milestone_vote",
+    viewerIsTeamMember: true,
+  });
+
+  assert.equal(visibility.showOpenMilestoneVote, false);
+});
+
+test("formation actions can disable chamber vote navigation from server eligibility", () => {
+  const visibility = getFormationActionVisibility({
+    ...baseInput,
+    hasOpenRoles: false,
+    pendingMilestone: 2,
+    projectState: "awaiting_milestone_vote",
+    viewerCanOpenMilestoneVote: false,
+  });
+
+  assert.equal(visibility.showOpenMilestoneVote, true);
+  assert.equal(visibility.canOpenMilestoneVote, false);
+});
+
+test("formation actions show finish only to proposer when ready", () => {
+  const visibility = getFormationActionVisibility({
+    ...baseInput,
+    hasOpenRoles: false,
+    isProposerViewer: true,
+    projectState: "ready_to_finish",
+    viewerIsTeamMember: true,
+  });
+
+  assert.equal(visibility.showFinishProject, true);
+  assert.equal(visibility.canFinishProject, true);
+  assert.equal(visibility.showJoinProject, false);
+});
diff --git a/tests/unit/human-nodes-ui.test.ts b/tests/unit/human-nodes-ui.test.ts
index 4c50c3b..8882204 100644
--- a/tests/unit/human-nodes-ui.test.ts
+++ b/tests/unit/human-nodes-ui.test.ts
@@ -147,16 +147,19 @@ test("human node profile title and short badge handle generic names", () => {
   expect(shouldShowHumanNodeShortBadge(named)).toBe(true);
 });
 
-test("human node visible hero stats hide CM internals", () => {
+test("human node visible hero stats keep ACM and hide chamber CM internals", () => {
   expect(
     getHumanNodeVisibleHeroStats([
       { label: "Tier", value: "Citizen" },
       { label: "ACM", value: "100" },
       { label: "LCM", value: "10" },
+      { label: "MCM", value: "20" },
+      { label: "MM", value: "30" },
       { label: "Projects", value: "2" },
     ]),
   ).toEqual([
     { label: "Tier", value: "Citizen" },
+    { label: "ACM", value: "100" },
     { label: "Projects", value: "2" },
   ]);
 });
diff --git a/tests/unit/phase89-design-rules.test.js b/tests/unit/phase89-design-rules.test.js
new file mode 100644
index 0000000..6a5e643
--- /dev/null
+++ b/tests/unit/phase89-design-rules.test.js
@@ -0,0 +1,227 @@
+import assert from "node:assert/strict";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { extname, join, relative } from "node:path";
+import { test } from "@rstest/core";
+
+const root = process.cwd();
+const srcRoot = join(root, "src");
+const textExtensions = new Set([".css", ".tsx", ".ts", ".js", ".jsx"]);
+
+function sourceFiles(dir = srcRoot) {
+  const files = [];
+  for (const entry of readdirSync(dir)) {
+    const path = join(dir, entry);
+    const stat = statSync(path);
+    if (stat.isDirectory()) {
+      files.push(...sourceFiles(path));
+      continue;
+    }
+    if (textExtensions.has(extname(path))) files.push(path);
+  }
+  return files;
+}
+
+function collectMatches(regex) {
+  const matches = [];
+  for (const path of sourceFiles()) {
+    const text = readFileSync(path, "utf8");
+    for (const match of text.matchAll(regex)) {
+      const before = text.slice(0, match.index);
+      const line = before.split("\n").length;
+      matches.push(`${relative(root, path)}:${line}: ${match[0]}`);
+    }
+  }
+  return matches;
+}
+
+test("Phase 89 does not render the repeated Humanode equation motif", () => {
+  assert.deepEqual(collectMatches(/\b1 Human\b|\b1 Node\b|\b1 Vote\b/g), []);
+  assert.deepEqual(collectMatches(/humanode-equation|landing__equation/g), []);
+});
+
+test("Phase 89 rejected panel abstractions stay removed", () => {
+  const removedFiles = [
+    "src/components/OperationalHeader.tsx",
+    "src/components/DisabledModule.tsx",
+    "src/components/primitives/textarea.tsx",
+    "src/pages/proposals/list/ProposalListCard.css",
+    "src/pages/proposals/shared/ProposalActionPanel.tsx",
+    "src/pages/proposals/shared/ProposalMetricPanel.tsx",
+  ];
+
+  assert.deepEqual(
+    removedFiles.filter((path) => existsSync(join(root, path))),
+    [],
+  );
+  assert.deepEqual(
+    collectMatches(
+      /OperationalHeader|DisabledModule|ProposalActionPanel|ProposalMetricPanel/g,
+    ),
+    [],
+  );
+});
+
+test("Phase 89 app shell avoids global decorative chrome", () => {
+  const shell = readFileSync(join(srcRoot, "app/AppShell.css"), "utf8");
+  const shellTsx = readFileSync(join(srcRoot, "app/AppShell.tsx"), "utf8");
+  const sidebar = readFileSync(join(srcRoot, "app/AppSidebar.tsx"), "utf8");
+  const sidebarCss = readFileSync(join(srcRoot, "app/AppSidebar.css"), "utf8");
+  const atmosphere = readFileSync(
+    join(srcRoot, "app/MainAtmosphere.tsx"),
+    "utf8",
+  );
+  const atmosphereCss = readFileSync(
+    join(srcRoot, "app/MainAtmosphere.css"),
+    "utf8",
+  );
+  const app = readFileSync(join(srcRoot, "app/App.tsx"), "utf8");
+  const global = readFileSync(join(srcRoot, "styles/global.css"), "utf8");
+
+  assert.doesNotMatch(shell, /workspace::before|humanode-equation/);
+  assert.match(shellTsx, /<MainAtmosphere \/>/);
+  assert.match(atmosphere, /main-atmosphere__sky/);
+  assert.match(atmosphere, /main-atmosphere__light/);
+  assert.match(atmosphere, /main-atmosphere__night/);
+  assert.match(atmosphere, /main-atmosphere__fire/);
+  assert.match(atmosphere, /<svg[\s\S]*main-atmosphere__cloud/);
+  assert.match(atmosphere, /main-atmosphere__cloud-wash/);
+  assert.match(atmosphere, /main-atmosphere__cloud-fill/);
+  assert.match(atmosphere, /main-atmosphere__cloud-line--curl/);
+  assert.match(atmosphereCss, /atmosphere-cloud-pass/);
+  assert.match(atmosphereCss, /atmosphere-petal-flow/);
+  assert.match(atmosphere, /main-atmosphere__galaxy/);
+  assert.match(atmosphere, /main-atmosphere__galaxy[\s\S]*<b \/>/);
+  assert.match(atmosphere, /main-atmosphere__galaxy[\s\S]*<i \/>/);
+  assert.match(atmosphereCss, /atmosphere-galaxy-breathe/);
+  assert.doesNotMatch(atmosphere, /constellation/);
+  assert.doesNotMatch(atmosphereCss, /constellation/);
+  assert.match(atmosphereCss, /atmosphere-smoke-rise/);
+  assert.match(atmosphereCss, /atmosphere-cinder-rise/);
+  assert.match(atmosphereCss, /atmosphere-campfire-glow/);
+  assert.doesNotMatch(atmosphere, /phoenix/i);
+  assert.doesNotMatch(atmosphereCss, /phoenix/i);
+  assert.match(atmosphereCss, /prefers-reduced-motion:\s*reduce/);
+  assert.doesNotMatch(sidebarCss, /main-atmosphere/);
+  assert.match(shell, /position:\s*sticky/);
+  assert.match(shell, /height:\s*100vh/);
+  assert.doesNotMatch(sidebar, /sidebar__logo/);
+  assert.doesNotMatch(sidebar, /useLocation/);
+  assert.doesNotMatch(sidebarCss, /sidebar__link--active::before/);
+  assert.doesNotMatch(sidebarCss, /@keyframes sidebar-link/);
+  assert.match(sidebarCss, /overflow-y:\s*auto/);
+  assert.doesNotMatch(app, /scrollTo/);
+  assert.match(global, /scrollbar-gutter:\s*stable/);
+});
+
+test("Phase 89 stage chips use semantic theme colors", () => {
+  const stageChip = readFileSync(
+    join(srcRoot, "components/StageChip.tsx"),
+    "utf8",
+  );
+  const stageChipCss = readFileSync(
+    join(srcRoot, "components/StageChip.css"),
+    "utf8",
+  );
+  const chipKinds = [
+    "proposal-pool",
+    "chamber-vote",
+    "citizen-veto",
+    "chamber-veto",
+    "formation",
+    "passed",
+    "failed",
+    "thread",
+    "courts",
+    "faction",
+    "system",
+  ];
+
+  assert.doesNotMatch(stageChip, /bg-panel-alt|text-muted|text-primary/);
+  for (const kind of chipKinds) {
+    assert.match(stageChipCss, new RegExp(`stage-chip--${kind}`));
+    assert.match(
+      stageChipCss,
+      new RegExp(`data-theme="light"[\\s\\S]*stage-chip--${kind}`),
+    );
+    assert.match(
+      stageChipCss,
+      new RegExp(`data-theme="night"[\\s\\S]*stage-chip--${kind}`),
+    );
+    assert.match(
+      stageChipCss,
+      new RegExp(`data-theme="fire"[\\s\\S]*stage-chip--${kind}`),
+    );
+  }
+});
+
+test("Phase 89 sidebar brush palettes are distinct per theme", () => {
+  const sidebarCss = readFileSync(join(srcRoot, "app/AppSidebar.css"), "utf8");
+  const themes = ["sky", "light", "night", "fire"];
+  const brushColors = themes.map((theme) => {
+    const block = sidebarCss.match(
+      new RegExp(
+        `:root\\[data-theme="${theme}"\\] \\.sidebar \\{([\\s\\S]*?)\\}`,
+      ),
+    );
+    assert.ok(block, `missing ${theme} sidebar brush block`);
+    const ink = block[1].match(/--sidebar-ink-a:\s*([^;]+);/);
+    assert.ok(ink, `missing ${theme} sidebar ink token`);
+    return ink[1];
+  });
+
+  assert.equal(new Set(brushColors).size, themes.length);
+});
+
+test("Phase 89 My Governance modules avoid redundant outer card shells", () => {
+  const myGovernanceComponents = join(
+    srcRoot,
+    "pages/my-governance/components",
+  );
+  for (const file of readdirSync(myGovernanceComponents)) {
+    if (!file.endsWith(".tsx")) continue;
+    const text = readFileSync(join(myGovernanceComponents, file), "utf8");
+    assert.doesNotMatch(text, /CardHeader|CardContent|CardTitle/);
+    assert.doesNotMatch(text, /from "@\/components\/Surface"|<Surface\b/);
+    assert.doesNotMatch(
+      text,
+      /from "@\/components\/SectionHeader"|<SectionHeader\b/,
+    );
+    assert.doesNotMatch(text, /variant="panelAlt"/);
+    assert.doesNotMatch(
+      text,
+      /Badge|bg-primary|bg-muted|bg-panel|bg-panel-alt/,
+    );
+    assert.doesNotMatch(
+      text,
+      /font-bold|font-semibold|font-extrabold|text-xl|text-2xl|text-lg/,
+    );
+  }
+});
+
+test("Phase 89 Formation keeps card grid while using shared glass grammar", () => {
+  const formation = readFileSync(
+    join(srcRoot, "pages/formation/Formation.tsx"),
+    "utf8",
+  );
+  const card = readFileSync(
+    join(srcRoot, "pages/formation/components/FormationProjectCard.tsx"),
+    "utf8",
+  );
+
+  assert.match(formation, /formation-project-grid/);
+  assert.match(card, /<Surface[\s\S]*as="article"/);
+  assert.match(card, /<Chip className="formation-project-card__stage"/);
+  assert.match(card, /stageLabel/);
+  assert.match(card, /chamberLabel/);
+  assert.match(card, /project\.chamberTitle/);
+  assert.match(card, /formation-project-card__fact/);
+  assert.match(card, /formationProjectCardFromProfileProject/);
+  assert.doesNotMatch(card, /StageChip/);
+  assert.doesNotMatch(card, /GlassyCard/);
+  assert.doesNotMatch(card, /GlassyRecordCard/);
+  assert.doesNotMatch(card, /CardHeader|CardContent/);
+  assert.doesNotMatch(
+    card,
+    /categoryLabel|formation-project-card__category|formation-project-card__focus|formation-project-card__statusDot/,
+  );
+});
diff --git a/tests/unit/phase89-visual-contract.test.ts b/tests/unit/phase89-visual-contract.test.ts
new file mode 100644
index 0000000..5c1b67d
--- /dev/null
+++ b/tests/unit/phase89-visual-contract.test.ts
@@ -0,0 +1,99 @@
+import assert from "node:assert/strict";
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { test } from "@rstest/core";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { MemoryRouter } from "react-router";
+
+import AppShell from "../../src/app/AppShell";
+import Guide from "../../src/pages/Guide";
+import Landing from "../../src/pages/Landing";
+import Paper from "../../src/pages/Paper";
+import Vortexopedia from "../../src/pages/Vortexopedia";
+
+function renderWithRouter(element: React.ReactElement, path = "/") {
+  return renderToStaticMarkup(
+    createElement(MemoryRouter, { initialEntries: [path] }, element),
+  );
+}
+
+test("Phase 89 static visual contract covers public entry routes", () => {
+  const landing = renderWithRouter(createElement(Landing));
+  const paper = renderWithRouter(createElement(Paper), "/paper");
+  const guide = renderWithRouter(createElement(Guide), "/guide");
+  const vortexopedia = renderWithRouter(
+    createElement(Vortexopedia),
+    "/app/vortexopedia",
+  );
+
+  assert.match(landing, /Enter Vortex/);
+  assert.match(landing, /This is Vortex Simulator/);
+  assert.match(landing, /centralized-server app/);
+  assert.match(landing, /experimental development workflow/);
+  assert.doesNotMatch(landing, /1 Human/);
+  assert.doesNotMatch(landing, /1 Node/);
+  assert.doesNotMatch(landing, /1 Vote/);
+  assert.match(landing, /poster\.png/);
+  assert.match(landing, /loop\.mp4/);
+
+  assert.match(paper, /Paper/);
+  assert.match(paper, /The Vortex 1\.0 paper lives on GitBook/);
+  assert.match(paper, /Open paper/);
+
+  assert.match(guide, /Vortex Guide/);
+  assert.match(guide, /How to read the UI/);
+  assert.match(guide, /The two UX primitives: hints and stages/);
+
+  assert.match(vortexopedia, /Search terms/);
+  assert.match(vortexopedia, /Showing 56 \/ 56 entries/);
+  assert.match(vortexopedia, /Vortex/);
+});
+
+test("Phase 89 static visual contract covers the app shell", () => {
+  const html = renderWithRouter(
+    createElement(
+      AppShell,
+      null,
+      createElement("section", { "aria-label": "Visual QA target" }, [
+        createElement("h1", { key: "title" }, "Visual QA target"),
+        createElement("p", { key: "body" }, "Representative route body"),
+      ]),
+    ),
+    "/app/feed",
+  );
+
+  assert.match(html, /Skip to content/);
+  assert.match(html, /id="main"/);
+  assert.match(html, /tabindex="-1"/);
+  assert.match(html, /main-atmosphere/);
+  assert.match(html, /main-atmosphere__sky/);
+  assert.match(html, /main-atmosphere__light/);
+  assert.match(html, /main-atmosphere__night/);
+  assert.match(html, /main-atmosphere__galaxy/);
+  assert.match(html, /main-atmosphere__fire/);
+  assert.match(html, /aria-label="Primary"/);
+  assert.match(html, /Governance/);
+  assert.match(html, /My governance/);
+  assert.match(html, /Institutions/);
+  assert.match(html, /CM panel/);
+  assert.match(html, /System/);
+  assert.match(html, /Settings/);
+  assert.doesNotMatch(html, /1 Human/);
+  assert.doesNotMatch(html, /1 Node/);
+  assert.doesNotMatch(html, /1 Vote/);
+  assert.match(html, /Visual QA target/);
+});
+
+test("Phase 89 release contract keeps mock data out of source wiring", () => {
+  const mockDirectory = join(process.cwd(), "src/mocks");
+  const httpSource = readFileSync(
+    join(process.cwd(), "src/lib/api/http.ts"),
+    "utf8",
+  );
+
+  assert.equal(existsSync(mockDirectory), false);
+  assert.doesNotMatch(httpSource, /@\/mocks/);
+  assert.doesNotMatch(httpSource, /phase89MockApi/);
+  assert.doesNotMatch(httpSource, /prop-mock/);
+});
diff --git a/tests/unit/proposal-stage-navigation.test.ts b/tests/unit/proposal-stage-navigation.test.ts
new file mode 100644
index 0000000..cabfb77
--- /dev/null
+++ b/tests/unit/proposal-stage-navigation.test.ts
@@ -0,0 +1,46 @@
+import { test } from "@rstest/core";
+import assert from "node:assert/strict";
+
+import { buildProposalStageLinks } from "../../src/components/ProposalStageBar.tsx";
+
+test("proposal stage navigation links previous stages as snapshots and live stage as canonical", () => {
+  const links = buildProposalStageLinks({
+    canonicalRoute: "/app/proposals/p-1/chamber",
+    liveStage: "vote",
+    proposalId: "p-1",
+  });
+
+  assert.equal(links.pool, "/app/proposals/p-1/pp?snapshotStage=pool");
+  assert.equal(links.vote, "/app/proposals/p-1/chamber");
+  assert.equal(links.citizen_veto, undefined);
+  assert.equal(links.chamber_veto, undefined);
+  assert.equal(links.build, undefined);
+});
+
+test("proposal stage navigation honors route overrides without exposing future stages", () => {
+  const links = buildProposalStageLinks({
+    liveStage: "citizen_veto",
+    proposalId: "p-2",
+    routeOverrides: {
+      vote: "/app/proposals/p-2/referendum",
+      chamber_veto: "/app/proposals/p-2/chamber-veto",
+    },
+  });
+
+  assert.equal(links.pool, "/app/proposals/p-2/pp?snapshotStage=pool");
+  assert.equal(links.vote, "/app/proposals/p-2/referendum?snapshotStage=vote");
+  assert.equal(links.citizen_veto, "/app/proposals/p-2/citizen-veto");
+  assert.equal(links.chamber_veto, undefined);
+});
+
+test("proposal stage navigation links terminal live stage and prior formation snapshot", () => {
+  const links = buildProposalStageLinks({
+    canonicalRoute: "/app/proposals/p-3/finished",
+    liveStage: "passed",
+    proposalId: "p-3",
+  });
+
+  assert.equal(links.build, "/app/proposals/p-3/formation?snapshotStage=build");
+  assert.equal(links.passed, "/app/proposals/p-3/finished");
+  assert.equal(links.failed, undefined);
+});
diff --git a/tests/unit/text-preview.test.ts b/tests/unit/text-preview.test.ts
new file mode 100644
index 0000000..92acac3
--- /dev/null
+++ b/tests/unit/text-preview.test.ts
@@ -0,0 +1,25 @@
+import { test } from "@rstest/core";
+import assert from "node:assert/strict";
+
+import { proposalSummaryPreview } from "../../src/lib/textPreview.ts";
+
+test("proposal summary preview caps text without adding ellipsis", () => {
+  const summary = [
+    "This proposal coordinates a long operational sequence across chambers,",
+    "formation teams, milestone delivery, budget routing, and public review so",
+    "that the card preview has to apply a stable text budget before rendering.",
+  ].join(" ");
+
+  const preview = proposalSummaryPreview(summary, 120);
+
+  assert.ok(preview.length <= 120);
+  assert.equal(preview.includes("..."), false);
+  assert.equal(preview.endsWith("."), false);
+});
+
+test("proposal summary preview normalizes whitespace", () => {
+  assert.equal(
+    proposalSummaryPreview("  One\n\nproposal\t summary.  "),
+    "One proposal summary.",
+  );
+});
diff --git a/tests/utils/stat-grid.test.js b/tests/utils/stat-grid.test.js
index b1916d4..403c171 100644
--- a/tests/utils/stat-grid.test.js
+++ b/tests/utils/stat-grid.test.js
@@ -1,8 +1,10 @@
 import assert from "node:assert/strict";
 import React from "react";
 import { test } from "@rstest/core";
+import { renderToStaticMarkup } from "react-dom/server";
+import { MemoryRouter } from "react-router";
 
-import { makeChamberStats } from "@/components/StatGrid";
+import { StatGrid, makeChamberStats } from "@/components/StatGrid";
 
 test("makeChamberStats maps values to the expected slots", () => {
   const stats = {
@@ -21,4 +23,14 @@ test("makeChamberStats maps values to the expected slots", () => {
     assert.ok(React.isValidElement(item.label));
     assert.ok(typeof item.value === "string");
   }
+
+  const html = renderToStaticMarkup(
+    React.createElement(
+      MemoryRouter,
+      null,
+      React.createElement(StatGrid, { items }),
+    ),
+  );
+  assert.ok(html.includes("Members"));
+  assert.ok(html.includes("ACM"));
 });