diff --git a/DESIGN.md b/DESIGN.md
index ef61480091..4d09b5c562 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -29,11 +29,14 @@ change.
   soft outer box with a small title row.
 - **Tactile buttons.** Buttons and navigation icon tiles have a 2px bottom
   edge. They lift 1px on hover and press down on click.
-- **Dark gray, not black.** Dark mode is a pure neutral dark gray (page
-  canvas about sRGB 10,10,10). Light mode is pure neutral
-  gray.
-- **One accent per theme.** Purple in light mode, yellow in dark mode (purple
-  has too little contrast on dark surfaces). Everything else is neutral.
+- **Dark gray, not black.** Dark mode page canvas and the top bar are neutral
+  sRGB 10,10,10 (`#0a0a0a`). Cards sit one step up (`#121212`). Light mode is
+  pure neutral gray.
+- **One accent.** Coolify purple in both themes (`#6b16ed`, hover `#7317ff`,
+  pressed `#5a12c7`, depth `#4a0fa3`, light text and icons `#a391ff`). Yellow
+  is only for real warnings. The dark sidebar, including the logo cell, is
+  purple-black (`#120e1a`) with a faint brand wash. The page canvas stays
+  neutral.
 - **Quiet text.** Sentence case. A clear text ladder: primary, dim, faint.
   No em dashes in UI copy.
 
@@ -94,8 +97,8 @@ follow the theme.
 
 .dark {
     /* Surfaces (dark: pure neutral dark gray) */
-    --ui-canvas: oklch(14.48% 0 0);   /* sRGB 10,10,10 */
-    --ui-panel: oklch(19.13% 0 0);     /* sRGB 20,20,20: header bar, card and table headers */
+    --ui-canvas: #0a0a0a;              /* page and top bar */
+    --ui-panel: #121212;               /* cards and table headers, not the top bar */
     --ui-card-bg: rgb(255 255 255 / 6%);
     --ui-card-border: rgb(255 255 255 / 8%);
     --ui-well-bg: rgb(0 0 0 / 34%);
@@ -114,8 +117,15 @@ follow the theme.
     --ui-fg-dim: oklch(76.99% 0 0);
     --ui-fg-faint: oklch(65% 0 0);
 
-    /* Accent and status: yellow accent in dark mode */
-    --ui-accent: oklch(88.13% 0.1507 91.7);
+    /* Accent stays purple. Yellow is the warning color, not the accent. */
+    --ui-accent: #6b16ed;
+    --ui-accent-top: #7317ff;
+    --ui-accent-bottom: #5a12c7;
+    --ui-accent-edge: #4a0fa3;
+    --ui-accent-fg: #ffffff;
+    --ui-accent-light: #a391ff;
+    --ui-sidebar: #120e1a;
+    --ui-card: #121212;
     --ui-success: oklch(72.27% 0.192 149.58);
     --ui-warning: oklch(88.13% 0.1507 91.7);
     --ui-error: oklch(66% 0.2 27.33);
@@ -131,16 +141,16 @@ Rules for the tokens:
 - Floating surfaces (menus, popovers, tooltips, modals) must be opaque. Use
   `--ui-menu-bg`, never a translucent value, or the content behind shows
   through.
-- Keep the dark surfaces pure neutral (chroma 0). A brand tint on the
-  surfaces was tried and removed.
+- Keep the page canvas, cards, menus, and logs pure neutral (chroma 0). The
+  dark sidebar and the logo cell above it are the tinted surface.
 - **Dark lightness level.** The canvas is at 14.48% and the header panel at
   19.13%. To
   change the level, move every dark surface and border token by the same
   amount (canvas, panel, menu, hover, borders, and the Coolify surface ladder),
   so the steps between layers stay the same. If you move only some of them, a
   hover fill can become darker than its menu.
-- The primary buttons use purple in both themes. Only focus rings, active
-  navigation, and other accent states change to yellow in dark mode.
+- Primary buttons, focus rings, and active navigation use purple in both
+  themes. Warning yellow is not an accent.
 
 ## P3. Scales
 
@@ -182,9 +192,14 @@ Class names below are examples. Keep the values and structure.
 - In dark mode, the header bar, the outer box of a top-level card, and the
   header row of a table use the same color (`--ui-panel`). The card wells and
   table rows are the darker content layer below them.
-- The sidebar is the canvas color and has a 1px `--ui-chrome-border` right
-  edge. The brand block (product name and version) at the top of the sidebar
-  column also uses the canvas color, with a 1px bottom border.
+- In light mode the sidebar is the canvas color and has a 1px
+  `--ui-chrome-border` right edge. In dark mode the sidebar column, including
+  the logo cell, is `#120e1a` with a brand-purple wash at the top (about 9%,
+  fading out) and a faint lavender right edge (`rgb(163 145 255 / 0.10)`).
+- The top bar matches the canvas. It has no bottom border at rest. After the
+  page scrolls under it, dark mode draws a lavender hairline
+  (`rgb(163 145 255 / 0.12)`), a translucent bar, blur, and a soft shadow.
+  The logo cell stays the solid sidebar color.
 - Keep the chrome borders faint. A strong border on near-black looks like a
   line drawn on the page.
 
@@ -205,21 +220,28 @@ Class names below are examples. Keep the values and structure.
     box-shadow: 0 2px 0 var(--ui-depth-color);
     transition: transform 80ms, box-shadow 80ms, border-color 120ms, background-color 120ms;
 }
-.dark .nav-tile { border-color: rgb(255 255 255 / 9%); background: rgb(255 255 255 / 4%); }
+.dark .nav-tile {
+    border-color: rgb(163 145 255 / 0.13);
+    background: rgb(107 22 237 / 0.07);
+    color: #b9adff;
+}
 .nav-item:hover .nav-tile { transform: translateY(-1px); box-shadow: 0 3px 0 var(--ui-depth-color); }
 .nav-item:active .nav-tile { transform: translateY(2px); box-shadow: none; }
 .nav-item.is-active .nav-tile {
-    color: var(--ui-accent);
-    border-color: color-mix(in oklab, var(--ui-accent) 45%, transparent);
-    --ui-depth-color: color-mix(in oklab, var(--ui-accent) 45%, transparent);
+    color: #fff;
+    border-color: #8a4dff;
+    background: linear-gradient(180deg, var(--ui-accent-top), var(--ui-accent-bottom));
+    --ui-depth-color: var(--ui-accent-edge);
+    box-shadow: 0 2px 0 var(--ui-accent-edge), 0 0 16px rgb(115 23 255 / 0.50);
 }
 ```
 
 - Use outline icons (1.5px stroke) at 16px. A brand item can use a one-color
   brand mark when it is clearer than an outline icon.
-- Rows with a submenu end in a 12px chevron: accent in light mode, faint gray
-  in dark mode.
-- Group rows under 11px section labels, and separate groups with a 1px divider.
+- Rows with a submenu end in a 12px chevron. In dark mode the chevron is
+  hidden until the row is hovered, focused, or current.
+- Group rows under section labels (11px in light mode; 10.5px uppercase muted
+  lavender in dark mode), and separate groups with a 1px divider.
 
 ### Card (outer box, title row, well)
 
@@ -444,10 +466,10 @@ The interface is compact and product-focused:
   heavy borders or a strong floating shadow;
 - full-width data tables for dense collections;
 - outline Reicon glyphs through `<x-reicon>`;
-- the Coolify purple brand accent in light mode;
-- the readable Coolify yellow accent in dark mode;
-- solid active-item fills (neutral black/white opacity), not accent gradients;
-  active state is a flat selected surface with no accent rail;
+- the Coolify purple brand accent in both themes (`#6b16ed`); yellow only for
+  real warnings, such as "Update available";
+- the active sidebar item is a purple gradient tile with a soft glow. The row
+  itself stays transparent;
 - sentence-case labels and headings;
 - never use the em dash (`—`) in UI copy. Prefer a period, colon, comma, or
   ASCII hyphen (`-`) for empty cells and separators.
@@ -527,19 +549,18 @@ the card well (`.dark .application-settings-section-body :is(.listbox-panel,
 ...)`).
 | `--coollabs-subtle` | 50% neutral | 70.8% neutral | labels and muted titles (light darkened for WCAG AA 4.5:1) |
 
-Accent behavior is intentionally theme-aware:
+Accent behavior uses Coolify purple in both themes. Brand tokens live in
+`@theme` as `--color-brand` (`#6b16ed`), `--color-brand-hover` (`#7317ff`),
+`--color-brand-press` (`#5a12c7`), `--color-brand-depth` (`#4a0fa3`), and
+`--color-brand-light` (`#a391ff`). Dark mode sets `--color-accent` to
+`--color-brand`. `--color-warning` stays yellow and is only for real warnings.
 
-- **Light mode:** Coolify purple (`coollabs`) for active controls, focus,
-  primary actions, and navigation accents.
-- **Dark mode:** Coolify yellow (`warning`) for the same states because the
-  original purple did not provide sufficient text and ring contrast.
-
-Do not hard-code blue focus rings or leave yellow accent utilities active in
-light mode. Primary action patterns should normally follow:
+Do not hard-code blue focus rings, and do not use `dark:text-warning` as a
+stand-in for the accent. Selected chips follow:
 
 ```html
 bg-coollabs/10 text-coollabs ring-coollabs/25
-dark:bg-warning/15 dark:text-warning dark:ring-warning/25
+dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25
 ```
 
 The filled top-level action/tab treatment uses the same palette at a restrained
@@ -554,16 +575,20 @@ lift off the content:
 - **Content canvas** is the base layer: `bg-app` in dark (deepest,
   `--color-app` `oklch(14.48% 0 0)`, sRGB 10,10,10), `bg-neutral-50` in light. The
   `<main>` content area and page body use it.
-- **Topbar chrome** uses `bg-panel` in dark (`--color-panel`
-  `oklch(19.13% 0 0)`, sRGB 20,20,20, a clear step lighter than the content canvas)
-  and `bg-white` in light, so the header reads as a separate panel. In dark
-  mode, top-level layer cards and table header rows use the same `--color-panel`.
+- **Topbar chrome** uses the canvas color in dark (`#0a0a0a`) and `bg-white`
+  in light. It has no bottom border until the page scrolls under it. Scrolling
+  adds `is-scrolled` on `<html>` (see `layouts/app.blade.php`) and the dark bar
+  becomes `rgb(10 10 10 / 0.72)` with blur and a lavender hairline. In dark
+  mode, top-level cards and table header rows use `--color-card` (`#121212`),
+  not the top bar.
 - **Desktop sidebar and the topbar brand block** (Coolify name and version)
-  use the content canvas color (`bg-neutral-50` / `dark:bg-app`). The sidebar
-  has a 1px right border, and the brand block has a 1px bottom border. These
-  chrome borders stay faint (`border-black/[0.06]`, `dark:border-white/[0.04]`);
-  do not use `dark:border-white/[0.06]`, which a global rule forces to the
-  solid hairline grey. The mobile drawer keeps `bg-panel` / `bg-white`.
+  use the canvas color in light mode. In dark mode they use `--color-sidebar`
+  (`#120e1a`): a vertical brand wash on the nav, a radial wash on the logo
+  cell, and a lavender right edge. Section labels are 10.5px uppercase mono in
+  muted lavender. Chevrons are hidden until the row is hovered, focused, or
+  current. The Admin icon stays neutral. The footer is transparent so the
+  wash continues. Do not use `dark:border-white/[0.06]` on these chrome edges;
+  a global rule forces that utility to the solid hairline grey.
 
 Dark surface tokens are exact oklch equivalents of chosen sRGB steps. oklch
 lightness compresses toward pure black below ~15%, so check the rendered sRGB
@@ -571,22 +596,26 @@ value. The dark ladder is `--color-app` 10, `--color-panel` 20,
 `--coollabs-elevated` 22, `--coollabs-base` 28,
 `--coollabs-recessed` 34 (sRGB, r=g=b), which reads as distinct surfaces.
 
-Temperature: in both modes every panel is **pure neutral gray** (r=g=b).
-In dark mode, every surface token (`--color-app`, `--color-panel`,
-`--coollabs-*`, `--color-surface`, `--color-raised`, `--color-selected`,
-`--color-log`) has chroma 0, so menus, listbox panels, modals, logs, and the
-command palette match the canvas. Do not give one surface a cast (blue, warm,
-or purple). The light page canvas uses `bg-neutral-50` (not
+Temperature: the page canvas, cards, menus, listboxes, modals, logs, and the
+command palette stay **pure neutral gray** (r=g=b). Do not tint those. The
+dark sidebar (`--color-sidebar`, `#120e1a`) is the exception: it carries a
+faint brand-purple wash. The light page canvas uses `bg-neutral-50` (not
 `bg-gray-50`, which is faintly cool) so it matches the neutral cards and chrome.
-The only intentional color is the purple/yellow brand accent.
+The only intentional color is the purple brand accent. Yellow is for warnings.
 - **Layer cards** use the outer box and inset well from section 5.
+- **Top-level pages** (Projects, Servers, and the other section roots) do not
+  repeat the page title in the breadcrumb when that title is the visible `h1`.
+  Nested pages keep the full trail (project, environment, resource).
+- **Pagination** is hidden when there is only one page (both arrows disabled).
+- **Project cards** spell out their counts: "1 environment · 35 resources".
+- **The view switcher** shows every view. The current one is a purple pill.
 - **Tables and collection tiles** outside a layer card use the
   `rounded-xl border … dark:bg-white/[0.05]` shell plus the crisp
   `--coollabs-hairline` ring; in light they are `bg-white` with the ring and
   the restrained card lift. In dark mode these shells are painted like layer
   cards. A tile, a separate pagination bar, or an empty box is a card without a
-  well, so it is `--color-panel`. A table (a shell whose first child is a
-  `border-b` header row) has a `--color-panel` header row and rows in the well
+  well, so it is `--color-card` (`#121212`). A table (a shell whose first child is a
+  `border-b` header row) has a `--color-card` header row and rows in the well
   color (`color-mix(in srgb, var(--color-panel) 66%, black)`).
   These rules match the Tailwind classes in `resources/css/app.css`, because
   the table shells are copied markup without a shared class.
diff --git a/resources/css/app.css b/resources/css/app.css
index afdae048ed..6eb6c15cfd 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -39,6 +39,13 @@
     --color-coollabs-100: oklch(52.34% 0.287 289.16);
     --color-coollabs-200: oklch(43.76% 0.2369 289.82);
     --color-coollabs-300: oklch(38.04% 0.2031 290.47);
+    /* coolLabs brand purple. Primary actions, focus, and active navigation
+       use these in both themes. Warning yellow is not an accent. */
+    --color-brand: #6b16ed;
+    --color-brand-hover: #7317ff;
+    --color-brand-press: #5a12c7;
+    --color-brand-depth: #4a0fa3;
+    --color-brand-light: #a391ff;
     --color-coolgray-100: oklch(20.9% 0 0);
     --color-coolgray-200: oklch(24.35% 0 0);
     --color-coolgray-300: oklch(26.03% 0 0);
@@ -102,7 +109,33 @@
 }
 
 .dark .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled) {
-    --button-depth-color: rgb(255 255 255 / 0.08);
+    --button-depth-color: rgb(107 22 237 / 0.35);
+    background-color: rgb(107 22 237 / 0.14);
+    border-color: rgb(163 145 255 / 0.24);
+    color: #ece8ff;
+}
+
+.dark .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled):hover {
+    background-color: rgb(107 22 237 / 0.18);
+    border-color: rgb(163 145 255 / 0.34);
+}
+
+.dark .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled) svg {
+    color: var(--color-brand-light);
+    opacity: 1;
+}
+
+.dark .button.button-highlighted:not(:disabled),
+.dark .button[isHighlighted]:not(:disabled) {
+    background: var(--color-brand);
+    border-color: transparent;
+    color: #fff;
+    --button-depth-color: var(--color-brand-depth);
+}
+
+.dark .button.button-highlighted:not(:disabled):hover,
+.dark .button[isHighlighted]:not(:disabled):hover {
+    background: var(--color-brand-hover);
 }
 
 .button.button-error:not(:disabled) {
@@ -1261,7 +1294,13 @@ html:not(.dark) .application-console-shell[data-console-theme="system"] .termina
 }
 
 .dark {
-    --color-accent: oklch(88.13% 0.1507 91.7);
+    /* Purple is the accent in dark mode too. Warning yellow stays on
+       --color-warning for real warnings only (update available, attention). */
+    --color-accent: var(--color-brand);
+    /* Cards sit one step above the #0a0a0a canvas. The top bar uses the canvas,
+       not this color. The sidebar uses --color-sidebar. */
+    --color-card: #121212;
+    --color-sidebar: #120e1a;
     /* Dark surface ladder in hex (sRGB), not oklch: oklch lightness compresses
        to near-black below ~15%, so oklch(15%) rendered as sRGB 11 and cards
        could not lift off the content canvas (sRGB 10). These give clear,
@@ -1842,25 +1881,28 @@ html[data-theme="custom"]:not(.dark) :is(.application-settings-section, .applica
     background: linear-gradient(var(--well-bg), var(--well-bg)), var(--card-underlay);
 }
 
-/* Dark mode: top-level cards use the topbar color (see DESIGN.md). */
+/* Dark mode: top-level cards are #121212, a step above the canvas. The top bar
+   matches the canvas instead (see the brand shell below). */
 .dark :is(.application-settings-section, .empty-state):not(:is(.application-settings-section, .application-settings-section-body) *) {
-    background: var(--color-panel);
+    background: var(--color-card);
+    box-shadow: none;
 }
 
 /* Dark mode: collection tiles, pagination bars, and tables match the cards.
-   A tile is a card without a well, so it takes the topbar color. A table (a
-   shell with a header row) takes the topbar color on the header row and the
-   box content (well) color on the rows. */
+   A tile is a card without a well. A table (a shell with a header row) takes
+   the card color on the header row and a darker mix on the rows. */
 .dark [class~="rounded-xl"][class~="dark:bg-white/[0.05]"] {
-    background: var(--color-panel);
+    background-color: var(--color-card) !important;
+    border-color: rgb(255 255 255 / 0.08) !important;
+    box-shadow: none;
 }
 
 .dark [class~="rounded-xl"][class~="dark:bg-white/[0.05]"]:has(> [class~="border-b"]:first-child) {
-    background: color-mix(in srgb, var(--color-panel) 66%, black);
+    background: color-mix(in srgb, var(--color-card) 66%, black) !important;
 }
 
 .dark [class~="rounded-xl"][class~="dark:bg-white/[0.05]"] > [class~="border-b"]:first-child {
-    background: var(--color-panel);
+    background: var(--color-card) !important;
 }
 
 /* Brief accent ring when a settings nav sub-item scrolls a section into view.
@@ -5552,10 +5594,17 @@ html:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-a
     --button-depth-color: color-mix(in oklab, var(--color-coollabs) 45%, transparent) !important;
 }
 
-html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-active) .menu-item-icon {
-    color: var(--color-warning);
-    border-color: color-mix(in oklab, var(--color-warning) 40%, transparent) !important;
-    --button-depth-color: color-mix(in oklab, var(--color-warning) 35%, transparent) !important;
+html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-active) .menu-item-icon:not(.text-error) {
+    color: #fff;
+    border-color: #8a4dff !important;
+    background: linear-gradient(180deg, var(--color-brand-hover) 0%, var(--color-brand-press) 100%) !important;
+    --button-depth-color: var(--color-brand-depth) !important;
+    box-shadow: 0 2px 0 var(--color-brand-depth), 0 0 16px rgb(115 23 255 / 0.50) !important;
+}
+
+html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-active):active .menu-item-icon:not(.text-error) {
+    transform: translateY(2px);
+    box-shadow: none !important;
 }
 
 /* Danger Zone icons (<x-reicon name="danger">) stay red, also when active. */
@@ -5644,9 +5693,11 @@ html:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.si
     box-shadow: none;
 }
 
-html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle) .menu-item-icon {
-    border-color: oklch(100% 0 0 / 0.09);
-    background: oklch(100% 0 0 / 0.04);
+html.dark:where(:not([data-nav-items="flat"])) .app-sidebar :is(.menu-item, .menu-subitem):not(.sidebar-toggle):not(.menu-search):not(.nav-admin):not(.menu-item-active):not(.menu-subitem-active) .menu-item-icon {
+    border-color: rgb(163 145 255 / 0.13);
+    background: rgb(107 22 237 / 0.07);
+    color: #b9adff;
+    --button-depth-color: rgb(255 255 255 / 0.05);
 }
 
 html:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle):hover .menu-item-icon,
@@ -5655,10 +5706,17 @@ html:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-a
     background: #fff;
 }
 
-html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle):hover .menu-item-icon,
-html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item-active, .menu-subitem-active) .menu-item-icon {
-    border-color: oklch(100% 0 0 / 0.18);
-    background: oklch(100% 0 0 / 0.08);
+html.dark:where(:not([data-nav-items="flat"])) :is(.menu-item, .menu-subitem):not(.sidebar-toggle):not(.menu-item-active):not(.menu-subitem-active):hover .menu-item-icon {
+    border-color: rgb(255 255 255 / 0.14);
+    background: rgb(255 255 255 / 0.06);
+    color: #fff;
+}
+
+/* Admin stays a neutral tile unless it is the current page. */
+html.dark .app-sidebar .nav-admin:not(.menu-item-active) .menu-item-icon {
+    color: oklch(72% 0 0);
+    background: rgb(255 255 255 / 0.03);
+    border-color: rgb(255 255 255 / 0.07);
 }
 
 /* Search keeps its original input look while the sidebar is expanded (always on
@@ -5948,6 +6006,188 @@ html.dark .canvas-zoom-max {
     }
 }
 
+/* Brand shell (dark): black canvas and top bar, purple-black sidebar, scroll hairline.
+   Light mode keeps the neutral shell. Floating navigation keeps its own frame. */
+html.dark .app-sidebar nav.sidebar-nav,
+html.dark .mobile-sidebar-sheet [role="dialog"] {
+    background-color: var(--color-sidebar);
+    background-image: linear-gradient(180deg, rgb(107 22 237 / 0.09), transparent 520px);
+    border-right-color: rgb(163 145 255 / 0.10);
+    --color-nav-text: oklch(80% 0.02 300);
+    --color-nav-muted: oklch(58% 0.04 300);
+}
+
+html.dark .app-topbar-brand {
+    background-color: var(--color-sidebar);
+    background-image: radial-gradient(140% 260% at 0% 0%, rgb(107 22 237 / 0.12), transparent 70%);
+    border-right-color: rgb(163 145 255 / 0.10);
+}
+
+html.dark .app-sidebar .sidebar-footer {
+    background-color: transparent;
+}
+
+html.dark .app-sidebar .menu-search {
+    background-color: rgb(163 145 255 / 0.06) !important;
+    box-shadow: inset 0 0 0 1px rgb(163 145 255 / 0.10) !important;
+}
+
+html.dark .app-sidebar .menu-search:hover {
+    background-color: rgb(163 145 255 / 0.10) !important;
+}
+
+html.dark .app-sidebar .menu-search kbd {
+    border-color: rgb(163 145 255 / 0.18) !important;
+}
+
+html.dark .app-sidebar nav:not(.sidebar-collapsed) .nav-section {
+    font-family: var(--font-mono);
+    font-size: 10.5px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: rgb(163 145 255 / 0.55);
+    opacity: 1;
+}
+
+html.dark .app-sidebar .nav-chevron {
+    transition: opacity 120ms ease;
+}
+
+html.dark .app-sidebar .menu-item:not(:hover):not(:focus-visible):not(.menu-item-active) > .nav-chevron {
+    opacity: 0;
+}
+
+html.dark:not([data-nav-style="floating"]) .app-topbar {
+    background-color: #0a0a0a;
+    backdrop-filter: none;
+    transition: background-color 180ms ease;
+}
+
+html.dark:not([data-nav-style="floating"]) .app-topbar > div:not(.app-topbar-brand) {
+    border-bottom-color: transparent;
+    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+}
+
+html.dark.is-scrolled:not([data-nav-style="floating"]) .app-topbar {
+    background-color: rgb(10 10 10 / 0.72);
+    backdrop-filter: blur(12px) saturate(140%);
+}
+
+html.dark.is-scrolled:not([data-nav-style="floating"]) .app-topbar > .app-topbar-brand {
+    background-color: var(--color-sidebar);
+}
+
+html.dark.is-scrolled:not([data-nav-style="floating"]) .app-topbar > div:not(.app-topbar-brand) {
+    border-bottom-color: rgb(163 145 255 / 0.12);
+    box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.95), 0 1px 0 rgb(107 22 237 / 0.06);
+}
+
+html.dark .view-toggle {
+    gap: 2px;
+    padding: 2px;
+    background-color: rgb(107 22 237 / 0.06);
+    border-color: rgb(163 145 255 / 0.16);
+}
+
+html.dark .view-toggle > :is(a, button) {
+    color: oklch(80% 0.02 300);
+}
+
+html.dark .view-toggle > :is(a, button) svg {
+    color: var(--color-brand-light);
+}
+
+html.dark .view-toggle > :is(a, button):not(.is-selected):hover {
+    background-color: rgb(107 22 237 / 0.14);
+    color: #fff;
+}
+
+html.dark .view-toggle > .is-selected {
+    background: linear-gradient(180deg, var(--color-brand-hover), var(--color-brand-press));
+    color: #fff;
+    box-shadow: 0 1px 0 var(--color-brand-depth), inset 0 0 0 1px #8a4dff;
+}
+
+html.dark .view-toggle > .is-selected svg {
+    color: #fff;
+}
+
+html.dark .view-toggle .bg-coollabs {
+    background-color: rgb(163 145 255 / 0.18);
+    color: #d9d0ff;
+}
+
+html.dark .resource-glyph {
+    border-color: rgb(163 145 255 / 0.20);
+    background: rgb(107 22 237 / 0.10);
+    color: var(--color-brand-light);
+}
+
+html.dark .card-icon-button {
+    color: var(--color-brand-light);
+}
+
+html.dark .card-icon-button:hover {
+    background-color: rgb(107 22 237 / 0.16);
+    color: #fff;
+}
+
+html.dark .app-main :is(article.group, a.group).rounded-xl {
+    background-color: var(--color-card) !important;
+    border-color: rgb(255 255 255 / 0.08) !important;
+    box-shadow: none;
+}
+
+html.dark .app-main :is(article.group, a.group).rounded-xl:hover {
+    border-color: rgb(163 145 255 / 0.30) !important;
+    box-shadow: none;
+}
+
+.project-card-stats {
+    color: oklch(40% 0 0);
+    font-size: 11.5px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.project-card-stats b {
+    color: oklch(20% 0 0);
+    font-weight: 600;
+}
+
+.project-card-stats-dot {
+    margin-inline: 5px;
+    color: oklch(70% 0 0);
+}
+
+html.dark .project-card-stats {
+    color: oklch(72% 0 0);
+}
+
+html.dark .project-card-stats b {
+    color: #f2f2f2;
+}
+
+html.dark .project-card-stats-dot {
+    color: oklch(45% 0 0);
+}
+
+.dark .application-settings-form :is(.input, select, textarea):focus,
+.dark .application-settings-form :is(.input, select, textarea):focus-visible,
+.dark .application-settings-workspace :is(.input, select, textarea):focus,
+.dark .application-settings-workspace :is(.input, select, textarea):focus-visible {
+    border-color: var(--color-brand);
+    box-shadow: 0 0 0 3px rgb(107 22 237 / 0.25) !important;
+}
+
+/* One page of results: the bar is noise. !important beats the flex utility and Alpine x-show. */
+.pager[hidden] {
+    display: none !important;
+}
+
 /* Dark mode (both navigation styles): the floating dotted backdrop shows through
    see-through surfaces (dark:bg-white/[x] with or without `!`, .button, …). Give the
    outermost ones the same color as an opaque mix with the app background, like the
@@ -5979,7 +6219,8 @@ html.dark .canvas-zoom-max {
     html.dark .app-main [class*="dark:bg-white/[0.09]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: color-mix(in oklab, #fff 9%, var(--color-app)) !important; }
     html.dark .app-main [class*="dark:bg-white/[0.14]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: color-mix(in oklab, #fff 14%, var(--color-app)) !important; }
     html.dark .app-main [class*="dark:bg-white/[0.1]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: color-mix(in oklab, #fff 10%, var(--color-app)) !important; }
-    html.dark .app-main :is(.button, .view-toggle):not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: color-mix(in oklab, #fff 6%, var(--color-app)) !important; }
+    html.dark .app-main .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled):not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: rgb(107 22 237 / 0.14) !important; border-color: rgb(163 145 255 / 0.24) !important; color: #ece8ff !important; }
+    html.dark .app-main .view-toggle:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) { background-color: rgb(107 22 237 / 0.06) !important; border-color: rgb(163 145 255 / 0.16) !important; }
     html.dark .app-main [class*="dark:hover:bg-white/10"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 10%, var(--color-app)) !important; }
     html.dark .app-main [class*="dark:hover:bg-white/[0.025]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 2.5%, var(--color-app)) !important; }
     html.dark .app-main [class*="dark:hover:bg-white/[0.035]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 3.5%, var(--color-app)) !important; }
@@ -5991,7 +6232,13 @@ html.dark .canvas-zoom-max {
     html.dark .app-main [class*="dark:hover:bg-white/[0.08]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 8%, var(--color-app)) !important; }
     html.dark .app-main [class*="dark:hover:bg-white/[0.12]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 12%, var(--color-app)) !important; }
     html.dark .app-main [class*="dark:hover:bg-white/[0.1]"]:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 10%, var(--color-app)) !important; }
-    html.dark .app-main .button:not(:disabled):not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: color-mix(in oklab, #fff 10%, var(--color-app)) !important; }
+    html.dark .app-main .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled):not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *):hover { background-color: rgb(107 22 237 / 0.18) !important; border-color: rgb(163 145 255 / 0.34) !important; }
+
+    /* Collection shells are #121212. Same selector as the 5% mix, plus .rounded-xl, so it wins. */
+    html.dark .app-main [class*="dark:bg-white/[0.05]"].rounded-xl:not(:is([class*="dark:bg-"]:not(.app-main), .button, .view-toggle, .application-settings-section, .application-settings-section-body, .box, .coolbox, .data-table, .resource-view, .empty-state, .loading-state-card, .runtime-log-shell, .logs-viewer) *) {
+        background-color: #121212 !important;
+        border-color: rgb(255 255 255 / 0.08) !important;
+    }
 }
 
 /* Resource menu in the collapsed main sidebar: icons only. */
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index a35cb76471..9f6d6eb582 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -142,7 +142,7 @@
 }
 
 @utility loading-indicator {
-    @apply text-coollabs dark:text-warning;
+    @apply text-coollabs dark:text-brand-light;
 }
 
 /* Compact icon-only control (gear, chevrons, etc.) */
@@ -162,7 +162,7 @@
 
 /* Active resource tab (used with aria-current="page") */
 @utility app-tab-active {
-    @apply bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20;
+    @apply bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25 dark:hover:bg-brand/20;
 }
 
 @utility auth-tooltip {
@@ -271,7 +271,7 @@
 }
 
 @utility heading-item-active {
-    @apply text-black rounded-sm dark:bg-coolgray-200 dark:text-warning;
+    @apply text-black rounded-sm dark:bg-coolgray-200 dark:text-brand-light;
 }
 
 @utility icon {
@@ -299,7 +299,7 @@
 }
 
 @utility kbd-custom {
-    @apply px-2 text-xs rounded-sm border border-dashed border-neutral-700 dark:text-warning;
+    @apply px-2 text-xs rounded-sm border border-dashed border-neutral-700 dark:text-brand-light;
 }
 
 @utility box {
diff --git a/resources/views/components/backup-tabs.blade.php b/resources/views/components/backup-tabs.blade.php
index d1c436e09b..9aebda0496 100644
--- a/resources/views/components/backup-tabs.blade.php
+++ b/resources/views/components/backup-tabs.blade.php
@@ -35,7 +35,7 @@
         @if ($context === 'service-schedule')
             <button type="button" @click="activeSection = '{{ $item['key'] }}'"
                 :class="activeSection === '{{ $item['key'] }}'
-                    ? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
+                    ? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
                     : 'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                 class="inline-flex h-8 shrink-0 cursor-pointer items-center rounded-md px-3 text-[13px] font-medium transition-colors">
                 {{ $item['label'] }}
@@ -43,7 +43,7 @@
         @else
             <a @class([
                 'inline-flex h-8 shrink-0 items-center rounded-md px-3 text-[13px] font-medium transition-colors',
-                'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25' => $section === $item['key'],
+                'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25' => $section === $item['key'],
                 'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg' => $section !== $item['key'],
             ])
                 {{ wireNavigate() }} href="{{ route($routes[$item['key']], $parameters) }}">
diff --git a/resources/views/components/canvas-view-toggle.blade.php b/resources/views/components/canvas-view-toggle.blade.php
index f27e7bab5a..d092d1da29 100644
--- a/resources/views/components/canvas-view-toggle.blade.php
+++ b/resources/views/components/canvas-view-toggle.blade.php
@@ -1,6 +1,6 @@
 @props(['listUrl' => null, 'canvasUrl' => null, 'onCanvas' => false, 'views' => null])
 @php
-    $idle = 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg dark:hover:bg-white/[0.06] dark:hover:text-fg';
+    $idle = 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:hover:text-white';
     $canvasItem = 'relative flex h-7.5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-[12px] font-medium transition-colors';
     $views ??= ['table' => ['Table view', 'unordered-list'], 'grid' => ['Grid view', 'grid']];
     // One list view (no table / grid choice): nothing to switch to on the list page.
@@ -22,11 +22,14 @@
             List view
         </a>
     @else
-        {{-- Only the views you can switch to, with their names; the current one is not shown. --}}
+        {{-- Every view stays visible. The current one is the selected pill. --}}
         @unless ($singleList)
             @foreach ($views as $mode => [$label, $icon])
-                <button type="button" x-on:click="setViewMode(@js($mode))" x-show="viewMode !== @js($mode)" x-cloak
-                    class="{{ $canvasItem }} {{ $idle }}" title="{{ $label }}">
+                <button type="button" x-on:click="setViewMode(@js($mode))"
+                    class="{{ $canvasItem }}"
+                    :class="viewMode === @js($mode) ? 'is-selected' : @js($idle)"
+                    :aria-pressed="(viewMode === @js($mode)).toString()"
+                    title="{{ $label }}">
                     <x-reicon :name="$icon" class="size-3.5" />
                     {{ $label }}
                 </button>
diff --git a/resources/views/components/client-pagination.blade.php b/resources/views/components/client-pagination.blade.php
index 924ec6e74b..f017a53a59 100644
--- a/resources/views/components/client-pagination.blade.php
+++ b/resources/views/components/client-pagination.blade.php
@@ -9,7 +9,7 @@
     'nextDisabled' => 'page >= totalPages',
 ])
 
-<footer {{ $attributes->class('flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
+<footer x-bind:hidden="Number(totalPages) <= 1" {{ $attributes->class('pager flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
     <div class="flex items-center gap-3">
         <span class="inline-flex h-7 items-center whitespace-nowrap tabular-nums" x-text="{{ $summary }}"></span>
         <x-page-size-select :model="$pageSizeModel" :storage-key="$storageKey" :options="$options" />
diff --git a/resources/views/components/dashboard/navbar.blade.php b/resources/views/components/dashboard/navbar.blade.php
index 8e7e390b81..5e5929d8a1 100644
--- a/resources/views/components/dashboard/navbar.blade.php
+++ b/resources/views/components/dashboard/navbar.blade.php
@@ -120,7 +120,7 @@
                 @foreach ($items as $item)
                     <a @class([
                         'app-tab shrink-0',
-                        'bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20' => $item['active'],
+                        'bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25 dark:hover:bg-brand/20' => $item['active'],
                     ])
                         {{ wireNavigate() }} href="{{ route($item['route'], $parameters) }}">
                         @if ($item['icon'] ?? null)
diff --git a/resources/views/components/deploying-indicator.blade.php b/resources/views/components/deploying-indicator.blade.php
index 4e6b3f1714..e379a8b91f 100644
--- a/resources/views/components/deploying-indicator.blade.php
+++ b/resources/views/components/deploying-indicator.blade.php
@@ -8,7 +8,7 @@
     // Persistent affordance shown while a deploy/start is running. Either re-opens
     // the in-page live-log dialog (services/databases, via $wire) or links to the
     // running deployment's log page (applications, via href) so the log is never lost.
-    $deployingIndicatorClasses = 'inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium ring-1 transition-colors bg-coollabs/10 text-coollabs ring-coollabs/25 hover:bg-coollabs/15 hover:no-underline dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20';
+    $deployingIndicatorClasses = 'inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium ring-1 transition-colors bg-coollabs/10 text-coollabs ring-coollabs/25 hover:bg-coollabs/15 hover:no-underline dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25 dark:hover:bg-brand/20';
 @endphp
 
 @if ($href)
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 90f281712e..205029c7f3 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -271,7 +271,7 @@
                                 :class="collapsed && 'lg:justify-center lg:px-0'">
                                 <x-reicon :name="$item['icon']" class="menu-item-icon" />
                                 <span class="menu-item-label flex-1 text-left" :class="collapsed && 'lg:hidden'">{{ $item['label'] }}</span>
-                                <x-reicon name="chevron-down" class="size-3 -rotate-90 text-coollabs dark:text-fg-faint" ::class="collapsed && 'lg:hidden'" />
+                                <x-reicon name="chevron-down" class="nav-chevron size-3 -rotate-90 text-coollabs dark:text-fg-faint" ::class="collapsed && 'lg:hidden'" />
                             </button>
                         @else
                             <a title="{{ $item['label'] }}" href="{{ $item['href'] }}"
@@ -294,9 +294,9 @@
             <li x-show="!submenu" @if ($activeSubmenu ?? null) x-cloak @endif @class(['xl:hidden' => $navContext ?? []])
                 :class="{ 'xl:hidden': navLevel !== -1 }">
                 <a title="Admin" {{ wireNavigate() }}
-                    class="{{ request()->is('admin') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                    class="nav-admin {{ request()->is('admin') ? 'menu-item-active menu-item' : 'menu-item' }}"
                     :class="collapsed && 'lg:justify-center lg:px-0'" href="{{ route('admin.index') }}">
-                    <x-reicon name="fire" class="menu-item-icon text-pink-500" />
+                    <x-reicon name="fire" class="menu-item-icon" />
                     <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Admin</span>
                 </a>
             </li>
@@ -324,7 +324,7 @@
     </ul>
     {{-- Sidebar footer (desktop only; mobile uses a temporary slide-over). It stays visible;
          only the menu above it scrolls on short or zoomed-in screens. --}}
-    <div class="sidebar-footer shrink-0 -mx-2 hidden flex-col gap-1 bg-neutral-50 px-2 py-2 dark:bg-app lg:-mx-3 lg:flex lg:px-3">
+    <div class="sidebar-footer shrink-0 -mx-2 hidden flex-col gap-1 bg-neutral-50 px-2 py-2 dark:bg-transparent lg:-mx-3 lg:flex lg:px-3">
         <div class="flex items-center gap-1" :class="collapsed ? 'flex-col justify-center' : 'justify-between'">
             <x-top-user-menu sidebar />
             <button type="button" @click="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar"
diff --git a/resources/views/components/shared-variables/view-controls.blade.php b/resources/views/components/shared-variables/view-controls.blade.php
index c0d7fe1445..5657f05900 100644
--- a/resources/views/components/shared-variables/view-controls.blade.php
+++ b/resources/views/components/shared-variables/view-controls.blade.php
@@ -13,12 +13,14 @@
         </button>
     </div>
 
-    {{-- Only the view you can switch to, with its name (as components/canvas-view-toggle.blade.php). --}}
+    {{-- Every view stays visible. The current one is the selected pill. --}}
     <div class="view-toggle w-fit">
         @foreach (['list' => ['List view', 'unordered-list'], 'grid' => ['Grid view', 'grid']] as $mode => [$viewLabel, $icon])
             <button type="button" @click="viewMode = '{{ $mode }}'; localStorage.setItem('{{ $storageKey }}', '{{ $mode }}')"
-                x-show="viewMode !== '{{ $mode }}'" x-cloak title="{{ $viewLabel }}"
-                class="relative flex h-7.5 items-center gap-1.5 rounded-md px-2.5 text-[12px] font-medium text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg dark:hover:bg-white/[0.06] dark:hover:text-fg">
+                title="{{ $viewLabel }}"
+                class="relative flex h-7.5 items-center gap-1.5 rounded-md px-2.5 text-[12px] font-medium transition-colors"
+                :class="viewMode === '{{ $mode }}' ? 'is-selected' : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:hover:text-white'"
+                :aria-pressed="(viewMode === '{{ $mode }}').toString()">
                 <x-reicon :name="$icon" class="size-3.5" />
                 {{ $viewLabel }}
             </button>
diff --git a/resources/views/components/table-pagination.blade.php b/resources/views/components/table-pagination.blade.php
index 076fc82639..27b6ddb6a0 100644
--- a/resources/views/components/table-pagination.blade.php
+++ b/resources/views/components/table-pagination.blade.php
@@ -20,7 +20,7 @@
     $hasLoading = filled($wireTarget);
 @endphp
 
-<footer {{ $attributes->class('flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
+<footer @if ((int) $lastPage <= 1) hidden @endif {{ $attributes->class('pager flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
     <div class="flex items-center gap-3">
         <span class="inline-flex h-7 items-center whitespace-nowrap tabular-nums">{{ $from }}–{{ $to }} of {{ $total }}</span>
         @isset($pageSize)
diff --git a/resources/views/components/top-breadcrumb.blade.php b/resources/views/components/top-breadcrumb.blade.php
index 6acaab08ae..9d61833831 100644
--- a/resources/views/components/top-breadcrumb.blade.php
+++ b/resources/views/components/top-breadcrumb.blade.php
@@ -104,15 +104,27 @@
         default => null,
     };
 @endphp
-<div class="flex min-w-0 items-center gap-0.5 text-[13px]">
+<div class="flex min-w-0 items-center gap-0.5 text-[13px]" data-page-context="{{ $dashboardContext }}"
+    x-data="{
+        titleRepeats: false,
+        syncTitle() {
+            const expected = this.$el.dataset.pageContext || '';
+            const heading = document.querySelector('.app-main h1');
+            const title = heading && heading.offsetHeight > 0 && heading.getBoundingClientRect().top < 140
+                ? heading.textContent.trim()
+                : '';
+            this.titleRepeats = expected !== '' && title === expected;
+        },
+    }"
+    x-init="syncTitle()" @livewire:navigated.window="$nextTick(() => syncTitle())">
     {{-- Team --}}
     <div class="shrink-0" x-data="{ collapsed: false }">
         <livewire:switch-team />
     </div>
 
     @if (!$currentProject && $dashboardContext)
-        <span class="shrink-0 px-0.5 text-neutral-300 dark:text-fg-faint">/</span>
-        <span
+        <span x-show="!titleRepeats" x-cloak class="shrink-0 px-0.5 text-neutral-300 dark:text-fg-faint">/</span>
+        <span x-show="!titleRepeats" x-cloak
             class="flex h-8 min-w-0 items-center truncate px-2 font-semibold text-black opacity-70 dark:text-fg">{{ $dashboardContext }}</span>
     @endif
 
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index ed88a038f7..a6807574eb 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -19,6 +19,14 @@
                         this.sidebarReady = true;
                     });
                 });
+                if (!window.__coolifyMarkScrolled) {
+                    window.__coolifyMarkScrolled = () => {
+                        document.documentElement.classList.toggle('is-scrolled', window.scrollY > 2);
+                    };
+                    window.addEventListener('scroll', window.__coolifyMarkScrolled, { passive: true });
+                    document.addEventListener('livewire:navigated', () => requestAnimationFrame(window.__coolifyMarkScrolled));
+                }
+                window.__coolifyMarkScrolled();
             },
             toggleSidebar() {
                 this.collapsed = !this.collapsed;
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 352060701a..9383303938 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -38,7 +38,7 @@
                 default => ['Ready', 'success'],
             }];
         });
-        $iconButton = 'flex size-6.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg';
+        $iconButton = 'card-icon-button flex size-6.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black';
         // Same look as $iconButton, sized to the 20px section title it sits next to.
         $titleIconButton = 'flex size-5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg';
         $tableShell = 'overflow-x-auto rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-white/[0.08] dark:bg-white/[0.05]';
@@ -127,7 +127,7 @@
 
                             <div class="flex min-w-0 items-start gap-3">
                                 <div
-                                    class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
+                                    class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
                                     @if ($project->icon_path)
                                         <img src="{{ project_icon_url($project) }}"
                                             alt="{{ $project->name }} icon"
@@ -150,18 +150,13 @@
                             </div>
 
                             <div class="mt-auto flex items-center justify-between gap-3 border-t border-neutral-100 pt-2.5 dark:border-white/[0.06]">
-                                <div class="relative z-10 flex min-w-0 items-center gap-3 text-[11px] font-medium text-neutral-500 dark:text-fg-dim">
-                                    <span class="inline-flex items-center gap-1" data-tooltip="Environments"
-                                        aria-label="Environments">
-                                        <x-reicon name="layers" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
-                                        {{ $project->environments->count() }}
-                                    </span>
-                                    <span class="inline-flex items-center gap-1" data-tooltip="Resources"
-                                        aria-label="Resources">
-                                        <x-reicon name="grid" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
-                                        {{ $resourceCount }}
-                                    </span>
-                                </div>
+                                <p class="project-card-stats relative z-10 min-w-0">
+                                    <b>{{ $project->environments->count() }}</b>
+                                    {{ $project->environments->count() === 1 ? 'environment' : 'environments' }}
+                                    <span class="project-card-stats-dot" aria-hidden="true">&middot;</span>
+                                    <b>{{ $resourceCount }}</b>
+                                    {{ $resourceCount === 1 ? 'resource' : 'resources' }}
+                                </p>
 
                                 <div class="relative z-10 flex shrink-0 items-center gap-0.5">
                                     @if ($firstEnvironment)
@@ -210,7 +205,7 @@
                                 class="absolute inset-0" aria-label="Open {{ $project->name }}"></a>
                             <div class="flex min-w-0 items-center gap-3">
                                 <div
-                                    class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim">
+                                    class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
                                     @if ($project->icon_path)
                                         <img src="{{ project_icon_url($project) }}" alt="{{ $project->name }} icon"
                                             class="h-full w-full rounded-lg object-cover">
@@ -336,7 +331,7 @@
 
                             <div class="relative z-10 flex min-w-0 items-start gap-3">
                                 <div
-                                    class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
+                                    class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
                                     <x-reicon name="servers" class="size-4" />
                                 </div>
                                 <div class="min-w-0 flex-1 self-center">
@@ -380,7 +375,7 @@
                             class="grid grid-cols-[minmax(0,1fr)_9.5rem] gap-4 @2xl:min-w-[480px] @2xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_9.5rem] hover:no-underline {{ $tableRow }}">
                             <div class="flex min-w-0 items-center gap-3">
                                 <div
-                                    class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.035] dark:text-fg-dim">
+                                    class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
                                     <x-reicon name="servers" class="size-4" />
                                 </div>
                                 <p class="truncate text-[13px] font-semibold text-black dark:text-fg">
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index 7a476c1c0c..e1fb41db15 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -89,7 +89,7 @@
                                 :aria-label="`Open ${project.name}`"></a>
                             <div class="flex items-start gap-3">
                                 <div
-                                    class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
+                                    class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
                                     <template x-if="project.iconUrl">
                                         <img :src="project.iconUrl" :alt="`${project.name} icon`" class="h-full w-full rounded-lg object-cover">
                                     </template>
@@ -108,28 +108,23 @@
                             </div>
 
                             <div class="mt-auto flex items-center justify-between gap-3 border-t border-neutral-100 pt-2.5 dark:border-white/[0.06]">
-                                <div class="relative z-10 flex min-w-0 items-center gap-3 text-[11px] font-medium text-neutral-500 dark:text-fg-dim">
-                                    <span class="inline-flex items-center gap-1" data-tooltip="Environments"
-                                        aria-label="Environments">
-                                        <x-reicon name="layers" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
-                                        <span x-text="project.environmentCount"></span>
-                                    </span>
-                                    <span class="inline-flex items-center gap-1" data-tooltip="Resources"
-                                        aria-label="Resources">
-                                        <x-reicon name="grid" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
-                                        <span x-text="project.resourceCount"></span>
-                                    </span>
-                                </div>
+                                <p class="project-card-stats relative z-10 min-w-0">
+                                    <b x-text="project.environmentCount"></b>
+                                    <span x-text="Number(project.environmentCount) === 1 ? 'environment' : 'environments'"></span>
+                                    <span class="project-card-stats-dot" aria-hidden="true">&middot;</span>
+                                    <b x-text="project.resourceCount"></b>
+                                    <span x-text="Number(project.resourceCount) === 1 ? 'resource' : 'resources'"></span>
+                                </p>
 
                                 <div class="relative z-10 flex shrink-0 items-center gap-0.5">
                                     <a x-show="project.addResourceHref" :href="project.addResourceHref"
                                         {{ wireNavigate() }}
-                                        class="flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
+                                        class="card-icon-button flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black"
                                         title="Add resource" :aria-label="`Add resource to ${project.name}`">
                                         <x-reicon name="plus" class="size-3" />
                                     </a>
                                     <a x-show="project.settingsHref" :href="project.settingsHref" {{ wireNavigate() }}
-                                        class="flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
+                                        class="card-icon-button flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black"
                                         title="Project settings" :aria-label="`Open settings for ${project.name}`">
                                         <x-reicon name="settings" class="size-3" />
                                     </a>
@@ -159,7 +154,7 @@
                         class="projects-table-grid group min-h-14 items-center border-b border-neutral-200 px-4 py-2.5 transition-colors last:border-b-0 hover:bg-neutral-50 dark:border-white/[0.07] dark:hover:bg-white/[0.025]">
                         <div class="flex min-w-0 items-center gap-3">
                             <div
-                                class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim">
+                                class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
                                 <template x-if="project.iconUrl">
                                     <img :src="project.iconUrl" :alt="`${project.name} icon`" class="h-full w-full rounded-lg object-cover">
                                 </template>
diff --git a/resources/views/livewire/project/shared/scheduled-task/show.blade.php b/resources/views/livewire/project/shared/scheduled-task/show.blade.php
index bff3acb9aa..481fd98253 100644
--- a/resources/views/livewire/project/shared/scheduled-task/show.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/show.blade.php
@@ -4,7 +4,7 @@
         @foreach (['general' => 'General', 'executions' => 'Executions', ...(auth()->user()->can('update', $resource) ? ['danger' => 'Danger Zone'] : [])] as $sectionKey => $sectionLabel)
             <button type="button" @click="activeSection = '{{ $sectionKey }}'"
                 :class="activeSection === '{{ $sectionKey }}'
-                    ? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
+                    ? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
                     : 'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg'"
                 class="inline-flex h-8 shrink-0 cursor-pointer items-center rounded-md px-3 text-[13px] font-medium transition-colors">
                 {{ $sectionLabel }}
diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php
index 0b9469dc08..c9d0b150e4 100644
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@@ -137,7 +137,7 @@
 
                         <div class="relative z-10 flex items-start gap-3">
                             <div
-                                class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
+                                class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
                                 <x-reicon name="servers" class="size-4" />
                             </div>
                             <div class="min-w-0 flex-1 self-center">
@@ -199,7 +199,7 @@
                         ])>
                         <div class="flex min-w-0 items-center gap-3">
                             <div
-                                class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.035] dark:text-fg-dim">
+                                class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
                                 <x-reicon name="servers" class="size-4" />
                             </div>
                             <div class="min-w-0">
diff --git a/resources/views/livewire/subscription/pricing-plans.blade.php b/resources/views/livewire/subscription/pricing-plans.blade.php
index a1674b5a59..cb74ae5c9b 100644
--- a/resources/views/livewire/subscription/pricing-plans.blade.php
+++ b/resources/views/livewire/subscription/pricing-plans.blade.php
@@ -7,14 +7,14 @@
                 <button type="button" x-on:click="selected = 'monthly'"
                     class="app-tab h-6! px-2.5!"
                     :class="selected === 'monthly'
-                        ? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
+                        ? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
                         : ''">
                     Monthly
                 </button>
                 <button type="button" x-on:click="selected = 'yearly'"
                     class="app-tab h-6! px-2.5!"
                     :class="selected === 'yearly'
-                        ? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
+                        ? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
                         : ''">
                     Yearly
                 </button>
diff --git a/tests/Feature/AdminAccessAuthorizationTest.php b/tests/Feature/AdminAccessAuthorizationTest.php
index 6816abd551..f25ecd5f02 100644
--- a/tests/Feature/AdminAccessAuthorizationTest.php
+++ b/tests/Feature/AdminAccessAuthorizationTest.php
@@ -172,7 +172,8 @@ test('root user sees the admin link in the navbar', function () {
     expect($navbar)
         ->toContain('href="'.route('admin.index').'"')
         ->toContain('title="Admin"')
-        ->toContain('text-pink-500');
+        ->toContain('nav-admin')
+        ->not->toContain('text-pink-500');
 });
 
 test('non-root user does not see the admin link in the navbar', function () {